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
routes: [
{ path: "/page1", component: Page1 },
{ path: "/page2", component: Page2 }
});
像這種配置的，大概就猜出你把系統的選單等公共部分都放在App.vue裡寫好了，然後透過一個<router-view/>進行系統內容的變更。
場景2
後面產品經理跟你說，要系統加一個官網、首頁之類的存在。！！如果你配了按照上述的路由情況，此時，你是不是有點懵呢？因為你把系統的公共內容如選單都寫在App.vue上了，但是首頁不需要系統的這些部分。
儘管你再配出了一個首頁的路由，但是你也要想辦法去掉那些已有的系統公共部分。
解決方案
所以我們不能採用上述配置方式。此時我們應該把系統本身作為一個路由，系統公共部分寫在這個路由對映元件上，而系統內部各頁作為子路由，巢狀在其下。
// example 2
{
path: "/"
component: Main,
children: [
path: "/page1",
component: Page1
},
path: "/page2",
component: Page2
}
這裡的Main元件就是系統的入口，選單等公共部分就是寫在這裡
此時App.vue檔案的內容應該就直接是一個路由入口了
<template>
<div>
<router-view/>
</div>
</template>
如果你一開始是這麼寫的話，那麼要新增一些非系統內部的頁面，簡直就輕而易舉了。如新增個首頁，直接新增個一級路由就好了
// example 3
children: [...]
path: "/home"
component: Home
但是此時我們應該要知道，當僅輸入你的網站域名（沒有具體到哪頁）時，會預設開啟path: /的頁面，上述例子就是預設開啟系統頁面了。
場景3
你的產品經理又來找事啦。再要求你添加個非系統頁，如登入註冊頁，開啟網站地址域名時預設跳轉到登入頁。
嗯，按照上一個配置情況，新增一個登入頁簡直so easy，但是要改預設開啟頁，這就尷尬了。
有人說，直接把系統的那個一級路由改一下不就好了嘛，然後把path: /留給要求預設開啟的頁面。
嗯，你說的很有道理，但我，不聽！假設你係統裡有比較多的跳轉，從系統內某一頁跳轉到某一頁的情況多，即你已經在程式碼裡寫了很多個$router.push("xxxx")，如果這麼一改，很麻煩，要一個個找出來進行修改。
因此，我們一開始的時候，就不應該為系統頁直接佔用path: "/"的路由。但是也不能為目前已知的任何一個頁面佔用path: "/"，因為即使你現在明確哪個頁面是預設開啟頁，但是你不能保證你的產品經理不會變心啊，萬一後面又要改呢？
所以！我們要為目前已知的每個頁面都設定路徑名，而不能佔用path: "/"；而實現預設開啟的功能，就要利用redirect進行跳轉
// example 4
path: "/main"
path: "login",
component: Login
path: "/",
redirect: "/login"
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檔案的內容應該就直接是一個路由入口了
<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"
}
]
});