首先我們要先安裝 Vue Router
Vue Router 安裝參考資訊
先在終端機輸入 $npm install vue-router --save
接著我們就要來配置 vue router
的文件src
資料夾底下的 main.js
為我們的進入點及 Entry
至於 Router
配置路徑則是 router/index.js
首先我們先在 src
資料夾底下新增一個 router
資料夾,在裡面新增一個 index.js
檔案
接著按照官方的安裝資訊,我們在 index.js
檔案內 import
檔案,再把 components
內的 HelloWorld
當成自訂義的元件也給 import
進去:
import Vue from 'vue';
import VueRouter from 'vue-router';
// 官方的元件
import Home from '@/components/HelloWorld'
// 自訂的分頁元件
Vue.use(VueRouter);
export default new VueRouter({
});
//把這些資料統整到 main.js 使用
接著到我們的 Entry
點 main.js
,我們要把剛剛的 router
給匯入:
import router from './router';
接著我們就可以到 index.js
來定義我們的 router
路徑:
export default new VueRouter({
routes: [
{
name: '首頁', // 元件呈現的名稱
path: '/', // 對應的虛擬路徑
component: Home, // 對應的元件
}
]
});
再來回到 App.vue
,把 <HelloWorld>
註解掉,接著新增 <router-view></router-view>
把它運行起來,就會發現路徑多了 #
就是路由配置好了