指令最後的 `-save` 或是 `save-dev` 是指自動將把套件稱和版本號添加到 package.json 文件中 dependencies / devdependencies 部分。
一般來說，為專案添加套件時必須先進行安裝，即在專案下輸入安裝指令，然後連同版本號手動將他們添加到配置文件 package.json 中的 dependencies 裡
```shell=
$ npm install vue-router
若在指令中添加 `-save` 或是 `save-dev` 可以省掉你手動修改的 package.json 文件的步驟。
2. **路由的配置**
添加 **src/router/index.js**，當作前端路由的配置檔案，決定哪個網址讀取哪份檔案。
```javascript=
// 引入官方元件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入自定義元件
import Hello from '@/components/HelloWorld.vue'
// 啟用 VueRouter 元件
Vue.use(VueRouter)
// 匯出給 entry 使用
export default new VueRouter({
3. **引入Vue Router**
在 **entry**（src/main.js）匯入 Vue Router，並在 Vue 元件中引入該物件。
```javascript=
import Vue from 'vue'
import App from './App'
import router from "./router"
new Vue({
el: '#app',
components: { App },
template: '
',
router,
我自己在練習的時候在這步驟卡好久，一直得到下面 error
找了一陣子才發現，我一開始寫的時候是用
```javascript=
import Router from "./router"
只要把它改成
```javascript=
import router from "./router"
下面 Vue 元件中引入該物件的地方也把 **Router** 換成 **router** 就好了。
就是不曉得為什麼這樣就 work 了？
4. **定義路徑**
回到 src/router/index.js 定義路徑，在 VueRouter 元件中新增一個名為 **routes** 的 **陣列** ，裡面包含數的定義好的路徑物件。
```javascript=
// 匯出給 entry 使用
export default new VueRouter({
routes:[{
name:"HomePage", // 元件呈現的名稱
path:"/Hello", // 對應的虛擬路徑
component: Hello // 對應的元件
5. **加上 router-view**
回到 **App.vue** 中更改 template，在 template 中加上 router-view 的標籤（可以順便 mark 掉原先的 HelloWorld 標籤）
```htmlmixed=
6. **測試**
在網址中加上 Hello，就可連到所定義的元件。
## 新增路由路徑及連結
這邊會試著加入一個分頁，並新增一個導覽列來切換兩個分頁
0. **引入 [Bootstrap](https://getbootstrap.com)**
在開始之前，先在 index.html 的 header 中引入 [Bootstrap](https://getbootstrap.com)。
```htmlmixed=
:::warning
**注意**
是 Bootstrap 不是 [Bootstrap Vue](https://bootstrap-vue.js.org/)！
是 Bootstrap 不是 [Bootstrap Vue](https://bootstrap-vue.js.org/)！
是 Bootstrap 不是 [Bootstrap Vue](https://bootstrap-vue.js.org/) ！
1. **新增頁面**
在 components 的資料夾中新增一個新的元件命名為 page.vue，並將它與 HelloWorld 元件做出差異。
```htmlmixed=
Card title
example.
Go somewhere
這邊用 Bootstrap 的 card 元件做 page.vue，可以直接照[範例](https://getbootstrap.com/docs/4.3/components/card/)貼上就好。如果不想這麼麻煩，直接在 template 裡面塞一段文字也行，分得出 HelloWorld 與 Page 就可以了。
2. **為新頁面配置網址**
在 **src/router/index.js** 中添加新增 page.vue
```javascript=
// 引入官方元件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入自定義元件
import HelloWorld from '@/components/HelloWorld.vue'
import Page from '@/components/page/page.vue'
// 啟用 VueRouter 元件
Vue.use(VueRouter)
// 匯出給 entry 使用
export default new VueRouter({
routes: [
name: "HelloWorld", // 元件呈現的名稱
path: "/Hello", // 對應的虛擬路徑
component: HelloWorld // 對應的元件
name: "Page",
path: "/Page",
component: Page
加上後可以試著在 url 上分別加上 /Hello 或 /Page 確定是否能夠順列切換。
PS. page.vue 是放在 components 下一個名為 page資料夾裡面，所以引入路徑中寫成 ``@/components/page/page.vue``。
3. **新增個頁簽**
在 App.vue 中加上 Bootstrap 的 [Navbar](https://getbootstrap.com/docs/4.3/components/navbar/)，並新增兩個頁簽。
```htmlmixed=
