Vue Router 是 Vue的官方路由，也由前端模擬的路由。過往我們往往是透過後端來處理換頁，而為了減少讀取時間，我們可以透過 Vue Router 實現SPA（單頁式應用），在前端實現畫面切換而無須向後端發送請求。

Vue Router 開發流程

1. 引入 Vue Router 環境
2. 定義元件
3. 定義路由表
4. 加入對應連結

在一般網頁中引入 Vue Router

Vue Router並不是只有在 Vue cli 環境中才能運行。

<script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>

// 路由設定
const router = VueRouter.createRouter({
  // 網址路徑模式：使用網址 hash 的形式
  history: VueRouter.createWebHashHistory(),
  // 匯入路由表
  routes: []
});

app.use(router)

什麼是網址hash形式?

加入元件與路由設置

路由表中撰寫 路徑 與 對應的元件。

const componentA ={
  template:`<div>A</div>`
}

const componentB ={
  template:`<div>B</div>`
}

// 路由設定
const router = VueRouter.createRouter({
  // 網址路徑模式：使用網址 hash 的形式
  history: VueRouter.createWebHashHistory(),
  // 匯入路由表
  routes: [{
    path:'/a',
    component: componentA,
  },
  {
    path:'/b',
    component: componentB,
  }]
});

在 html 中加入 <router-view></router-view>

 <router-view></router-view>

透過切換 /a /b 路徑切換來做畫面內容切換

router-link

但我們不可能讓使用者手動切換路徑，所以我們需要 router-link 透過點擊連結來切換路徑。

 <router-link to="/a">a</router-link>|
 <router-link to="/b">b</router-link>

如何新增一個元件並加入到路由?

首先，在 views 檔案中創建一個 NewPage.vue 檔，並加入基本內容。

接著，到 router > index.js 中的 routes 新增一個物件。

最後回到 app.vue 中，新增 <router-link>

<router-link to="/newpage">newpage</router-link>

//或者

<router-link :to="{
      name:'新增頁面'
    }">newpage</router-link>

巢狀路由

巢狀路由就是在路由之下新增其他路由。

1. 把元件準備好 : 建立 元件A 與 元件B

2. 如果我們希望在 Newpage 之下增加其他的子項目，我們可以增加一個 children 的陣列 。

注意 : 子路由的路徑並不需要加斜線在前方。[color=green]

const routes = [
   {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [{
      path: 'a',
      component: () => import('../views/componentA.vue')
    },
    {
      path: 'b',
      component: () => import('../views/componentB.vue')
    }]
  }
]

然後回到 newpage.vue，加上一個群組列表以及相對應的 <router-view>

<template>
<div class="container">
   <div class="row">
      <div class="col-4">
        <div class="list-group">
         <router-link to="/newpage/a" class="list-group-item list-group-item-action" aria-current="true">選單a</router-link>
            <router-link to="/newpage/b" class="list-group-item list-group-item-action">選單b</router-link>
         </div>
      </div>
      <div class="col-8">
         <router-view></router-view>
      </div>
   </div>
   </div>
</template>