路由
- 理解： 一個路由（route）就是一組映射關系（key - value），多個路由需要路由器（router）進行管理，
- 前端路由：key是路徑，value是組件，
生活里的路由與路由器
路由分類
1. 后端路由：
- 理解：value 是 function, 用于處理客戶端提交的請求，
- 作業程序：服務器接收到一個請求時, 根據請求路徑找到匹配的函式
來處理請求, 回傳回應資料，
2. 前端路由：
- 理解：value 是 component，用于展示頁面內容，
- 作業程序：當瀏覽器的路徑改變時, 對應的組件就會顯示，
1.基本使用
-
安裝vue-router，命令：
npm i 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', //路徑是根路徑時展示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>
2.幾個注意點
- 路由組件通常存放在
pages檔案夾，一般組件通常存放在components檔案夾， - 通過切換，“隱藏”了的路由組件，默認是被銷毀掉的，需要的時候再去掛載，
- 每個組件都有自己的
$route屬性，里面存盤著自己的路由資訊， - 整個應用只有一個router，可以通過組件的
$router屬性獲取到，
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>
4.路由的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
5.命名路由
-
作用：可以簡化路由的跳轉，
-
如何使用
-
給路由命名：
{ 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>
-
6.路由的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
7.路由的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
}
}
}
8.<router-link>的replace屬性
- 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式：分別為
push和replace，push是追加歷史記錄，replace是替換當前記錄，路由跳轉時候默認為push - 如何開啟
replace模式：<router-link replace .......>News</router-link>
9.編程式路由導航
-
作用：不借助
<router-link>實作路由跳轉，讓路由跳轉更加靈活 -
具體編碼：
//$router的兩個API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前進 this.$router.back() //后退 this.$router.go(2) //可前進也可后退,傳入數字正數表示前進2步，負數表示后退幾步
10.快取路由組件
-
作用：讓不展示的路由組件保持掛載，不被銷毀，
-
具體編碼：
<keep-alive :include="[News,...]"> // include里面的指定需要快取的路由組件名，不指定include就表示全部快取 <router-view></router-view> </keep-alive>
11.兩個新的生命周期鉤子
- 作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態，
- 具體名字：
activated路由組件被激活時觸發，deactivated路由組件失活時觸發，
12.路由守衛
-
作用：對路由進行權限控制
-
分類：全域守衛、獨享守衛、組件內守衛
-
全域守衛:
//全域前置守衛：初始化時執行、每次路由切換前執行 router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制 if(localStorage.getItem('school') === 'atguigu'){ //權限控制的具體規則 next() //放行 }else{ alert('暫無權限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全域后置守衛：初始化時執行、每次路由切換后執行 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改網頁的title }else{ document.title = 'vue_test' } }) -
獨享守衛:
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('暫無權限查看') // next({name:'guanyu'}) } }else{ next() } } -
組件內守衛：
//進入守衛：通過路由規則，進入該組件時被呼叫 beforeRouteEnter (to, from, next) { }, //離開守衛：通過路由規則，離開該組件時被呼叫 beforeRouteLeave (to, from, next) { }
13.路由器的兩種作業模式
- 對于一個url來說，什么是hash值？—— #及其后面的內容就是hash值，
- hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器，
- hash模式：
- 地址中永遠帶著#號，不美觀 ，
- 若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法，
- 兼容性較好，
- history模式：
- 地址干凈，美觀 ，
- 兼容性和hash模式相比略差，
- 應用部署上線時需要后端人員支持，解決重繪頁面服務端404的問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535228.html
標籤：其他