如何寫出一個利於擴展的vue路由配置

時間 2019-11-07

標籤如何寫出一個利於擴展 vue 路由配置欄目系統網絡简体版

原文原文鏈接

前言

從歷往經驗來看，開發一個新項目，每每在剛開始部署項目，到項目的正式交付，以及交付後的後續維護，功能加強等過程，都須要對項目的一些已有結構和邏輯進行調整。html

所以，若是有些內容剛建項目時不考慮好將來的可擴展性，後續調整會很麻煩。vue

這裏先來講，在vue項目中，如何寫路由配置，更利於將來可擴展。vue-router

vue-router的基本配置

爲了方便新學者的閱讀與理解。先來看一下最基本的路由是如何配置的編程

// 0. 導入Vue和VueRouter腳本，若是使用模塊化機制編程，要調用 Vue.use(VueRouter)

// 1. 定義 (路由) 組件。
// 能夠從其餘文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每一個路由應該映射一個組件。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes // (縮寫) 至關於 routes: routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
複製代碼

若是具體還要什麼不懂的，仍是多看官方文檔把bash

便於擴展的路由設置

到這裏我當你已經比較熟悉路由配置的相關知識哦，很細的知識點我就不細說了。app

場景1

假設你如今接到一個新項目，產品經理要求你開發一個系統，給你的交互圖等資料都是關於系統內部的各個頁面。這時你覺得開發的這個系統就僅僅是直接展現系統內部的狀況了，甚至你啥都沒想，就直接開始配置路由寫頁面去了。ide

一開始你差很少寫出瞭如下的路由配置：模塊化

// example 1
const router = new VueRouter({
    routes: [
        { path: '/page1', component: Page1 },
        { path: '/page2', component: Page2 }
    ]
});
複製代碼

像這種配置的，大概就猜出你把系統的菜單等公共部分都放在App.vue裏寫好了，而後經過一個<router-view/>進行系統內容的變動。優化

場景2

後面產品經理跟你說，要系統加一個官網、首頁之類的存在。！！若是你配了按照上述的路由狀況，此時，你是否是有點懵呢？由於你把系統的公共內容如菜單都寫在App.vue上了，可是首頁不須要系統的這些部分。網站

儘管你再配出了一個首頁的路由，可是你也要想辦法去掉那些已有的系統公共部分。

解決方案

因此咱們不能採用上述配置方式。此時咱們應該把系統自己做爲一個路由，系統公共部分寫在這個路由映射組件上，而系統內部各頁做爲子路由，嵌套在其下。

// example 2
const router = new VueRouter({
    routes: [
        { 
            path: '/'
            component: Main,
            children: [
                {
                    path: 'page1',
                    component: Page1
                },
                {
                    path: 'page2',
                    component: Page2
                }
            ]
        }
    ]
});
複製代碼

這裏的Main組件就是系統的入口，菜單等公共部分就是寫在這裏

此時App.vue文件的內容應該就直接是一個路由入口了

<!-- App.vue -->
<template>
    <div>
        <router-view/>
    </div>
</template>

複製代碼

若是你一開始是這麼寫的話，那麼要新增一些非系統內部的頁面，簡直就垂手可得了。如新增個首頁，直接新增個一級路由就行了

// example 3
const router = new VueRouter({
    routes: [
        { 
            path: '/'
            component: Main,
            children: [...]
        },
        { 
            path: '/home'
            component: Home
        }
    ]
});
複製代碼

可是此時咱們應該要知道，當僅輸入你的網站域名（沒有具體到哪頁）時，會默認打開path: /的頁面，上述例子就是默認打開系統頁面了。

場景3

你的產品經理又來找事啦。再要求你添加個非系統頁，如登陸註冊頁，打開網站地址域名時默認跳轉到登陸頁。

嗯，按照上一個配置狀況，新增一個登陸頁簡直so easy，可是要改默認打開頁，這就尷尬了。

有人說，直接把系統的那個一級路由改一下不就行了嘛，而後把path: /留給要求默認打開的頁面。

嗯，你說的頗有道理，但我，不聽！假設你係統裏有比較多的跳轉，從系統內某一頁跳轉到某一頁的狀況多，即你已經在代碼裏寫了不少個$router.push('xxxx')，若是這麼一改，很麻煩，要一個個找出來進行修改。

解決方案

所以，咱們一開始的時候，就不該該爲系統頁直接佔用path: '/'的路由。可是也不能爲目前已知的任何一個頁面佔用path: '/'，由於即便你如今明確哪一個頁面是默認打開頁，可是你不能保證你的產品經理不會變心啊，萬一後面又要改呢？

因此！咱們要爲目前已知的每一個頁面都設置路徑名，而不能佔用path: '/'；而實現默認打開的功能，就要利用redirect進行跳轉

// example 4
const router = new VueRouter({
    routes: [
        { 
            path: '/main'
            component: Main,
            children: [...]
        },
        { 
            path: '/home'
            component: Home
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/',
            redirect: '/login'
        }
    ]
});
複製代碼

這樣的話，不論後面怎麼變化，你只須要作新增/刪除路由以及改變redirect值控制打開默認頁了。這就是最終的解決方案了

優化路由結構內容

仍是在上一個例子結論的基礎上進行這節的描述，假設你的系統比較大，有不少的頁面，不少的模塊，例如菜單欄中有比較多的一級菜單，而每一個一級菜單下又有不少二級菜單甚至子孫菜單。

好，就算你如今拿到的需求是不多系統內容的，可是你也不能保證之後你的系統會發展成什麼樣，萬一賣得很好，加不少功能需求呢。

在上述假設的條件下，那麼你就得往children里加不少路由映射了

{ 
    path: '/main'
    component: Main,
    children: [...]
}
複製代碼

如此一來，你的這個文件，一定很長很長！所以，咱們要拆分，進行模塊化引入。

能夠以你一級菜單的名字命名進行模塊拆分，一個一級菜單對應一個文件（若是你的系統有功能模塊的區分，那也能夠按照功能模塊來拆分文件），而後引入到這個主路由配置文件便可。

// example 5
...
import overview from './overview';
import copyrightManager from './copyrightManager';
import monitor from './monitor';

const router = new VueRouter({
    routes: [
        { 
            path: '/main'
            component: Main,
            children: [
                {
                    path: '',
                    // 默認進入的系統內部頁
                    redirect: 'overview'
                },
                ...overview,
                ...copyrightManager,
                ...monitor
            ]
        },
        { 
            path: '/home'
            component: Home
        }
    ]
});
複製代碼