前言

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

因此，如果有些內容剛建項目時不考慮好未來的可擴展性，后續調整會很麻煩。

這里先來說，在vue項目中，如何寫路由配置，更利于未來可擴展。

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')

如果具體還要什么不懂的，還是多看官方文檔 把

便于擴展的路由設置

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

場景1

假設你現在接到一個新項目，產品經理要求你開發一個系統，給你的交互圖等資料都是關于系統內部的各個頁面。 這時你以為開發的這個系統就僅僅是直接展示系統內部的情況了，甚至你啥都沒想，就直接開始配置路由寫頁面去了。
一開始你差不多寫出了以下的路由配置：

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

像這種配置的，大概就猜出你把系統的菜單等公共部分都放在App.vue里寫好了，然后通過一個<router-view/>進行系統內容的變更。

場景2

后面產品經理跟你說，要系統加一個官網、首頁之類的存在。！！如果你配了按照上述的路由情況，此時，你是不是有點懵呢？因為你把系統的公共內容如菜單都寫在App.vue上了，但是首頁不需要系統的這些部分。
盡管你再配出了一個首頁的路由，但是你也要想辦法去掉那些已有的系統公共部分。

解決方案

所以我們不能采用上述配置方式。此時我們應該把系統本身作為一個路由，系統公共部分寫在這個路由映射組件上，而系統內部各頁作為子路由，嵌套在其下。