首先在當前專案下安裝依賴包，執行npm install  vue-router  則package.json中添加了vue-router

此時在src 下的main.js主程式中引入vue-router，同時告訴Vue使用此路由配置

1 import VueRouter from "vue-router"
2 Vue.use(VueRouter);

引入需要配置的元件的資訊

1 import Vmain from "./components/Vmain.vue"
2 import Vcourse from "./components/Vcourse.vue
 
"
3 import Vmarke from "./components/Vmarke.vue"

例項化一個路由物件，並把配置路由列表傳進去，路由可以去除預設的井號配置 mode:"history"

1 const router=new VueRouter({
2   mode:"history",
3   routes:[
4     {path:"/",component:Vmain},
5     {path:"/Vcourse",component:Vcourse},
6     {path:"/Vmarke",component:Vmarke},
7     ]
8 });

把當前路由物件掛載到Vue物件中去，在鍵值相同的情況下，可以省略用，代替

1 new Vue({
2   el: '#app',
3   router,
4   components: { App },
5   template: '<App/>'
6 });

在父元件app.vue裡面，如果想用子元件路由，則必須加入 <router-view></router-view>

然後可以用<router-link to=" ">xxx</router-link> 去替代<a href="">xxx</a>

預設會加載出 "/"對應的路由