Vue 基礎概念 [8] - Vue Router

使用 Vue Router 及配置路由文件

//進入點
main.js
//Router 配置檔案 (前端路由，決定哪個網址讀取哪個元件。假如在新建 Vue cli 的時候選擇需要包含 router 配置，就會直接建立在這個目錄下面)
router/index.js
//分頁內容
Vue components (**.vue)

安裝

npm install vue-router --save

概念描述

Vue-router 是 Vue.js 的官方路由插件，它適合運用在建立單面應用。Vue 的單面應用。Vue 的單面應用基礎是路由和元件，路由用在設定訪問路徑，並將路徑和組件對應起來。

傳統的頁面應用是利用抄連結來實現頁面的切換和跳轉。在 Vue-router 的單面應用，則是路徑之間的切換，也就是組件的切換。

基本設置

Router 設定

src/router/index.js

載入配置檔

把配置檔載入 entry

定義路徑

假設目前的網站規劃有一個登入 login 頁面、登入後的 home 及購物車三個頁面，而登入後的 home 又包含三個子路由頁面 A,B,C 元件：這就像一個樹狀結構是有父子關係存在的，而父路由組件中會包含 router-view 作為子路由元件的渲染出口（如示意圖中藍色及黃色虛線區塊），而這些路由規則（例如：路由符合/login 時會載入 login.vue 組件到父層 App.vue) 的 router-view 中），都會明確定義在 router設定中

實際 Router 設定如下，會與上圖的動線設計有對應階層關係。

視圖 router-view

src/App.vue
視圖的作用就是在符合路由規則的情境下，以元件從指定路由取代父層元件中的視圖。整個應用元件的第一個視圖是在 App.vue 檔案裡面，這表示在 vue-router 設定的第一層路由元件在匹配的狀況下，會直接取代 App.vue 裡的 router-view 元素

http://www.網址/＃/home

新增路由路徑及連結達成分頁切換

先載入 Bootstrap

新增一個資料夾管理分頁

新增一個分頁

並使用 bootstrap 的 navbar，首先把平常使用的 <a> 標籤替換成 <router-link>，把href替換成 router-view 切換分頁的方法 to。，在這個範例裡面有 2 種切換分頁的方法

• path 搭配 to
  to="/page"
• 動態切換
  :to="{name:'首頁'}"

製作巢狀路由頁面

現在要做一個巢狀路由頁面，讓 child 切換的時候，可以維持 card 的外觀，但是內容更換。首先先定義 children 路徑，他們都是在 page 底下的子路由頁面元件

新增三個元件，點擊的時候切換 children 內容到視圖層

使用動態路由切換頁面 Ajax 的使用情景

我們經常需要把所有路由，都使用同一個組件來渲染。例如相同的版型，卻要動態載入不同內容。好比說在寫商品詳情頁面的時候，也面結構都一樣，只是商品 id 不同，這時候就可以用動態路由。以下用 children 這一層的路由做動態路由範例

• 引入元件並填寫路由參數
  
• 到元件中獲取路由參數
  $route.params.id 就是獲取當前路由的參數。
  
  現在隨意輸入一個參數就可以看到結果如下：
  

動態路由的其它模式
https://zhuanlan.zhihu.com/p/39275718

命名路由，同一個路徑載入 2 個頁面元件

原本的路徑只能以 component 屬性載入單一的元件 Page，現在我們利用 components 就可以使用 default 屬性不僅載入原先的 Page，另外還可以再載入其它元件，只是這些元件都必須再新增 router-view 而且要加上各自的 name 屬性。

在新增的 router-view 標籤上加上 name 屬性，主要是要與對應的組件匹配以顯示組件內容，

在 components 屬性裡透過定義預設路由對應組件(Page)，所以 name: ‘分頁’，省略時不會影響 router-view 的顯示，

Vue Router 參數設定

Vue-router 的構造配置裡的 mode ，可以調整路徑配置方法
可选值: “hash” | “history” | “abstract”

配置路由模式

可選值: “hash” | “history” | “abstract”

• hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
• history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
• abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

不使用 hash 模式而使用 history 模式的時候，

使用的是後端伺服器的路由，所以前後端要搭配對應的模式使用預設的模式即可

linkActiveClass

觸發特定路徑的時候，會在標籤上加上的 class 名稱，可自定義名稱

自定義切換路由方法

切換頁面不能全靠 router-link 切換，例如有些行為必須在 Ajax 結束後再切換畫面，此時就不一定適用 router-link。

動態切換

$router.push

$ router.back

$router.go(n)