本文主要記錄 Vue.js 中的 router 管理，涉及如何使用路由實現單頁面應用（SPA）的組件切換，以及路由的一些 API 操作。 ...
1.1 相關理解
1.1.1 vue-router 的理解
Vue 的一個插件庫，專門用來實現 SPA 應用
1.1.2 對 SPA 應用的理解
- 單頁
Web應用（single page web application，SPA） - 整個應用只有一個完整的頁面
- 點擊頁面中的導航鏈接不會刷新頁面，只會做頁面的局部更新
- 數據需要通過
Ajax請求獲取
1.1.3 路由的理解
-
什麼是路由
- 一個路由就是一組映射關係（
key-value）key為路徑,value可能是function或component
- 一個路由就是一組映射關係（
-
路由分類
- 後端路由：
- 理解：
value是function, 用於處理客戶端提交的請求 - 工作過程：伺服器接收到一個請求時,根據請求路徑找到匹配的函數來處理請求,返迴響應數據
- 理解：
2.前端路由：
- 理解：
value是component，用於展示頁面內容 - 工作過程：當瀏覽器的路徑改變時,對應的組件就會顯示。
- 後端路由：
1.2 基本路由
1.2.1 安裝與使用
-
安裝
vue-router，命令：npm install vue-router -
應用插件：
Vue.use(VueRouter) -
編寫
router配置項：//引入VueRouter import VueRouter from 'vue-router' //引入Luyou 組件 import About from '../components/About' import Home from '../components/Home' //創建router實例對象，去管理一組一組的路由規則 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router -
實現切換（
active-class可配置高亮樣式）<router-link active-class="active" to="/about">About</router-link> -
指定展示位置
<router-view></router-view> -
幾個註意點：
- 路由組件通常存放在
pages文件夾，一般組件通常存放在components文件夾 - 通過切換，“隱藏”了的路由組件，預設是被銷毀掉的，需要的時候再去掛載
- 每個組件都有自己的
$route屬性，裡面存儲著自己的路由信息 - 整個應用只有一個
router，可以通過組件的$router屬性獲取到
- 路由組件通常存放在
1.2.2 總結
編寫使用路由的 3 步
- 定義路由組件
- 註冊路由
- 使用路由
1.3 嵌套（多級）路由
-
配置路由規則，使用
children配置項：routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通過children配置子級路由 { path:'news', //此處一定不要寫：/news component:News }, { path:'message',//此處一定不要寫：/message component:Message } ] } ] -
跳轉（要寫完整路徑）：
<router-link to="/home/news">News</router-link>
1.4 路由傳參
1.4.1 路由的 query 參數
-
傳遞參數
<!-- 跳轉並攜帶query參數，to的字元串寫法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link> <!-- 跳轉並攜帶query參數，to的對象寫法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }" >跳轉</router-link> -
接收參數：
$route.query.id $route.query.title
1.4.2 命名路由
-
作用：可以簡化路由的跳轉。
-
如何使用
-
給路由命名：
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //給路由命名 path:'welcome', component:Hello, } ] } ] } -
簡化跳轉：
<!--簡化前，需要寫完整的路徑 --> <router-link to="/demo/test/welcome">跳轉</router-link> <!--簡化後，直接通過名字跳轉 --> <router-link :to="{name:'hello'}">跳轉</router-link> <!--簡化寫法配合傳遞參數 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳轉</router-link>
-
1.4.3 路由的 params 參數
-
配置路由，聲明接收
params參數{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符聲明接收params參數 component:Detail } ] } ] } -
傳遞參數
<!-- 跳轉並攜帶params參數，to的字元串寫法 --> <router-link :to="/home/message/detail/666/你好">跳轉</router-link> <!-- 跳轉並攜帶params參數，to的對象寫法 --> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳轉</router-link>特別註意：路由攜帶
params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！ -
接收參數：
$route.params.id $route.params.title
1.4.4 路由的 props 配置
作用：讓路由組件更方便的收到參數
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件
// props:{a:900}
//第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數通過props傳給Detail組件
// props:true
//第三種寫法：props值為函數，該函數返回的對象中每一組key-value都會通過props傳給Detail組件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
1.4.5 <router-link> 的 replace 屬性
- 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式：分別為
push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉時候預設為push - 如何開啟
replace模式：<router-link replace .......>News</router-link>
1.5 編程式路由導航
this.$router.push(path): 相當於點擊路由鏈接(可以返回到當前路由界面)this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)this.$router.back(): 請求(返回)上一個記錄路由this.$router.go(-1): 請求(返回)上一個記錄路由this.$router.go( 1 ): 請求下一個記錄路由
