vue-router的基本配置
為了方便新學者的閱讀與理解。先來看一下最基本的路由是如何配置的
//0.導入Vue和VueRouter腳本，如果使用模塊化機制編程，要調用Vue.use(VueRouter)
//1.定義(路由)組件。
//可以從其他文件import進來
constFoo={template:'<div>foo</div>'}
constBar={template:'<div>bar</div>'}
//2.定義路由
//每個路由應該映射一個組件。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
//3.創建router實例，然后傳`routes`配置
//你還可以傳別的配置參數,不過先這么簡單著吧。
constrouter=newVueRouter({
routes//(縮寫)相當于routes:routes
})
//4.創建和掛載根實例。
//記得要通過router配置參數注入路由，
//從而讓整個應用都有路由功能
constapp=newVue({
router
}).$mount('#app')
如果具體還要什么不懂的，還是多看官方文檔把
便于擴展的路由設置
到這里我當你已經比較熟悉路由配置的相關知識哦，很細的知識點我就不細說了。
場景1
假設你現在接到一個新項目，產品經理要求你開發一個系統，給你的交互圖等資料都是關于系統內部的各個頁面。這時你以為開發的這個系統就僅僅是直接展示系統內部的情況了，甚至你啥都沒想，就直接開始配置路由寫頁面去了。
一開始你差不多寫出了以下的路由配置：
//example1
constrouter=newVueRouter({
routes:[
{path:'/page1',component:Page1},
{path:'/page2',component:Page2}
]
});
像這種配置的，大概就猜出你把系統的菜單等公共部分都放在App.vue里寫好了，然后通過一個<router-view/>進行系統內容的變更。
場景2
后面產品經理跟你說，要系統加一個官網、首頁之類的存在。?。∪绻闩淞税凑丈鲜龅穆酚汕闆r，此時，你是不是有點懵呢？因為你把系統的公共內容如菜單都寫在App.vue上了，但是首頁不需要系統的這些部分。
盡管你再配出了一個首頁的路由，但是你也要想辦法去掉那些已有的系統公共部分。
解決方案
所以我們不能采用上述配置方式。此時我們應該把系統本身作為一個路由，系統公共部分寫在這個路由映射組件上，而系統內部各頁作為子路由，嵌套在其下。
//example2
constrouter=newVueRouter({
routes:[
{
path:'/'
component:Main,
children:[
{
path:'/page1',
component:Page1
},
{
path:'/page2',
component:Page2
}
]
}
]
});
這里的Main組件就是系統的入口，菜單等公共部分就是寫在這里
此時App.vue文件的內容應該就直接是一個路由入口了
<!--App.vue-->
<template>
<div>
<router-view/>
</div>
</template>
如果你一開始是這么寫的話，那么要新增一些非系統內部的頁面，簡直就輕而易舉了。如新增個首頁，直接新增個一級路由就好了
//example3
constrouter=newVueRouter({
routes:[
{
path:'/'
component:Main,
children:[...]
},
{
path:'/home'
component:Home
}
]
});
但是此時我們應該要知道，當僅輸入你的網站域名（沒有具體到哪頁）時，會默認打開path:/的頁面，上述例子就是默認打開系統頁面了。
場景3
你的產品經理又來找事啦。再要求你添加個非系統頁，如登錄注冊頁，打開網站地址域名時默認跳轉到登錄頁。
嗯，按照上一個配置情況，新增一個登錄頁簡直soeasy，但是要改默認打開頁，這就尷尬了。
有人說，直接把系統的那個一級路由改一下不就好了嘛，然后把path:/留給要求默認打開的頁面。
嗯，你說的很有道理，但我，不聽！假設你系統里有比較多的跳轉，從系統內某一頁跳轉到某一頁的情況多，即你已經在代碼里寫了很多個$router.push('xxxx')，如果這么一改，很麻煩，要一個個找出來進行修改。
解決方案
因此，我們一開始的時候，就不應該為系統頁直接占用path:'/'的路由。但是也不能為目前已知的任何一個頁面占用path:'/'，因為即使你現在明確哪個頁面是默認打開頁，但是你不能保證你的產品經理不會變心啊，萬一后面又要改呢？
所以！我們要為目前已知的每個頁面都設置路徑名，而不能占用path:'/'；而實現默認打開的功能，就要利用redirect進行跳轉
//example4
constrouter=newVueRouter({
routes:[
{
path:'/main'
component:Main,
children:[...]
},
{
path:'/home'
component:Home
},
{
path:'login',
component:Login
},
{
path:'/',
redirect:'/login'
}
]
});
這樣的話，不論后面怎么變化，你只需要做新增/刪除路由以及改變redirect值控制打開默認頁了。這就是最終的解決方案了