使用 Vue.js 做專案的時候，一個頁面是由多個元件構成的，所以在跳轉頁面的時候，並不適合用傳統的 href，於是 vue-router 應運而生。

這次的例項主要實現下圖的效果：

專案結構：

一、配置 Router

用 vue-cli 建立的初始模板裡面，並沒有 vue-router，需要通過 npm 安裝

?

1	cnpm i vue-router -D

安裝完成後，在 src 資料夾下，建立一個 routers.js 檔案，和 main.js 平級

然後在 router.js 中引入所需的元件，建立 routers 物件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import Home from './components/home.vue' const routers = [ { path: '/home', name: 'home', component: Home }， { path: '/', component: Home }， ] export default routers

在建立的 routers 物件中， path 配置了路由的路徑，component 配置了對映的元件

需要注意的是：export default routers 必須寫在檔案底部，而且後面還需要接一空行，否則無法通過 ESlint 語法驗證

然後 main.js 也需要修改：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17