溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
從歷往經驗來看，開發一個新項目，往往在剛開始部署項目，到項目的正式交付，以及交付后的后續維護，功能增強等過程，都需要對項目的一些已有結構和邏輯進行調整。
因此，如果有些內容剛建項目時不考慮好未來的可擴展性，后續調整會很麻煩。
這里先來說，在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 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
}
]
});
這里例子中就是把原本寫在children里邊的一個個路由映射單獨寫在每個文件里（自己分類好），然后通過import引進來，利用...再把它放回進去。
這樣維護起來就更加方便啦
總結
關于路由的配置優化介紹就說到這里了，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
