Vue-router 是一套官方的套件庫，適合用來架設單頁面中的版面切換。

傳統的網站，會用超連結(herf)來進行頁面切換跟跳轉。

在vue-router中，是採用路徑的切換，也就是組件(component)之間的切換來達成。

安裝

npm install vue-router --save-dev

如果一開始在安裝Vue專案時有預設安裝VueRouter這步驟可以省略

--save是 npm 的安裝指令，會把安裝的套件加入到package.json檔案中，而-dev則會特別加在devDependencies區域中，否則會放在dependencies區域中。

使用

以下是本範例的檔案路徑以及說明

src
├─ App.vue
├─ Main.js
└─ components
   ├─ About.vue           //本頁下掛載兩個子頁面About-me About-you
   ├─ About-me.vue
   ├─ About-you.vue
   ├─ Content.vue         //本頁下掛載兩個子頁面Content-me Content-you 且在Content-you實作動態路由路徑配置
   ├─ Content-me.vue
   ├─ Content-you.vue
   └─ HelloWorld.vue      //本頁為vue-router入口掛載頁面分別掛載About.vue以及Content.vue

首先進行vue-router的環境以及路由路徑設定

Main.js

1.引入vue-router

    //引入vut-router
import VueRouter from 'vue-router'
    //引入component
import About from './components/About'
import Content from './components/Content'

2.init vue-router

Vue.use(VueRouter)

3.設定路由路徑

const routes =[
{
    //設定預設顯示頁面，即首頁
    path:'/',
    redirect:Home   
},
{
    path:'/about',
    component:About,
    children:[
    {
        path:'me',
        component:Aboutme
    },
    {
        path:'you',
        component:Aboutyou

    }
    ]
},
{
    path:'/content',
    component:Content,
    children:[
    {
        path:'me',
        component:Contentme
    },
    {
        path:'you/:id',
        component:Contentyou
    }
    ]
}
]

4.創建vue-router

const router = new VueRouter({
 routes
})

5.啟動

new Vue({
  router
})

在要進行router的頁面進行掛載

HelloWorld.vue

<router-link to="/about">About</router-link>
<router-link to="/content">Content</router-link>

設定router要顯示的位置

App.vue

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    //router出口顯示的位置
    <router-view></router-view>

  </div>
</template>

參考資料

搞搞就懂