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- 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 ): 請求下一個記錄路由
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529982.html
標籤：其他