安裝Vue Router
使用Vue CLI安裝Vue Router。開啟終端機，輸入:
vue add router@next
顯示是否使用 history mode 輸入Y，Enter繼續執行安裝。
一直跑到出現 successfully，即安裝完畢。
安裝完畢後，可以看到增加一些資料夾與檔案。
router資料夾與index.js檔案
index.js引入了vue-router，並建立routes來定義路由。
可以看到routes中定義了兩個路由。
{
path: "/", //設定路徑為"http://localhost/"
name: "Home", //設定名稱為Home
component: Home, //設定component來源
},
{
path: "/about", //設定路徑為"http://localhost/about"
name: "About", //設定名稱為About
component: import(../views/About.vue), //設定component來源
}routers裡所設定的component即為子頁面(router-view)所想要顯示的內容，如果component設定為"../views/About.vue"，那麼內容就會顯示src/views/About.vue這個檔案的內容。
最後，宣告 router為createRouter()建立路由，並將router輸出(export)，讓其他頁面可以引入router作為元件使用。
//createRouter為設定路由的method
const router = createRouter({ //將history設定為createWebHashHistory()
history: createWebHistory(process.env.BASE_URL), //routes為routes: routes的縮寫
routes,
});
views資料夾與兩支vue檔案
src/views資料夾底下的vue檔案為路由中component所對應的實體檔案。
App.vue
App.vue也跟原本不一樣了，多了<router-link/>與 <router-view />標籤。
<router-link/>
設定to屬性來指定路由。(router-link還有其他很多種屬性可以使用，可以參考這邊)
<router-view/>
用來顯示路由所對應到的components(views資料夾底下的vue檔案)。
main.js
引入了router資料夾，並在createApp(App)時，多加了.use(router)。
語法是指，在建立Vue時，把前面src/router/index.js所定義的router加進Vue裡，這樣之後便可以使用設定好的路由讓Vue專案使用。
執行後可以看到，上方多了兩個連結，分別是Hoem與About，點選後可以切換Home與About畫面。
接下來，來建立自己的首頁與選單menu，來切換顯示內容。
建立Layout
建立一個Layout做為首頁，首頁包含了Header、左側選單、右側內容。在src/assets資料夾加入圖片，命名為icon.png，用來做header的icon圖片。
在src底下新增Layout.vue檔案，並加入<router-link/>指定路由的路徑，以及<router-view>用來顯示路由所對應到的component。
程式碼如下:
接著，開啟src/main.js，調整App from 為"./Layout.vue"，讓首頁為Layout.vue。
這時候執行，會看到如下畫面:
建立view
建立三個view頁面，做為子頁面的顯示內容。在src/views資料夾底下新增子頁面，Nav1.vue、Nav2.vue、Nav3.vue。
給route的component使用。
設定route
設定路由與要對應的component。開啟src/router/index.js，分別引入views/Nav1.vue、views/Nav2.vue、views/Nav3.vue，並設定這三個畫面所對應的路徑。
最後，createRouter並輸出(export)。
執行畫面
起始畫面如下。
點選連結1，顯示src/views/Nav1.vue的內容。
點選連結2，顯示src/views/Nav2.vue的內容。
點選連結3，顯示src/views/Nav3.vue的內容。
後記
route除了傳遞路徑外，也可以設定路徑參數，讓母頁面可以傳遞參數給子頁面接受。
pattern
開啟src/route/index.js，將routes中的path參數做調整。
在路徑後面多加/:參數名稱，讓路由知道路徑中會包含參數。
以下是設定路徑最後會包含一個名為title的參數。
matched path
開啟src/Layout.vue，將<router-link/>的to屬性作調整，在原本的路徑後方加上/"想傳入的參數值"。
以下是分別設定參數為連結1、連結2、連結3。
$route.params
開啟src/views資料夾底下的Nav1.vue、Nav2.vue、Nav3.vue。
調整以{{ $route.params.title }}，來抓取路徑中的title參數並顯示。
執行後，點選連結即可看到調整後的內容。
