詳解Vue中的路由與多種守衛(wèi)
什么是路由呢？
路由其實是一種映射關系。
生活中的路由：設備和ip的映射關系；
node.js路由：接口和服務的 映射關系；
（前端）Vue中的路由：路徑和組件的映射關系。
什么是路由守衛(wèi)呢？
如果在面試中被問到了這個，比較完美的答案如下：
路由守衛(wèi)又稱導航守衛(wèi)，指是路由跳轉前、中、后過程中的一些鉤子函數。官方解釋是vue-router提供的導航守衛(wèi)，要通過跳轉或取消的方式來守衛(wèi)導航。路由守衛(wèi)分為三種，全局路由、組件內路由，路由獨享。
全局路由鉤子函數有：beforeEach、beforeResolve、afterEach（參數中沒有next）
組件內路由的鉤子函數有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave
路由獨享的鉤子函數有：beforeEnter
1.vue-router
vue的一個插件庫，專門用來實現對SPA應用的單頁Web應用(single page web application, SPA)。整個應用只有一個完整的頁面。點擊頁面中的導航鏈接不會刷新頁面，只會做頁面的局部更新。數據需要通過ajax請求獲取。
2.什么是路由
一個路由就是一組映射關系(key ：value)
key 為路徑, value可能是function或componente
路由分類
1.后端路由:value 杲function,用于處理客戶端提交的請求。工作過程: 服務器接收到一個請求時,根據請求路徑找到匹配的函數來處理請求,返回響應數據。
2.前端路由: value是component,用于展示頁面內容。工作過程: 當瀏覽器的路徑改變時,對應的組件就會顯示。
3.路由的基本使用
1.安裝vue-router
npm i vue-router
2.應用插件
Vue.use(VueRouter)
3.router配置項
// 引入vueRouter
importvueRouterfrom'vue-router'
// 引入組件
importAboutfrom'../components/About'
importHomefrom'../components/Home'
export default new vueRouter({
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]})
4.使用router-link實現切換（注：router-link經過瀏覽器后就會變成a標簽哦）
<divclass="list-group">
<!-- 原始寫法——使用a標簽進行頁面的跳轉 -->
<!-- <a class="list-group-item active" href="./about.html" rel="external nofollow" >About</a>
<a class="list-group-item" href="./home.html" rel="external nofollow" >Home</a>-->
<!-- 使用vue-Router提供的標簽進行路徑的修改,實現路由的切換 -->
<router-link
class="list-group-item"
active-class="active"
to="/about">About
</router-link>
<router-link
class="list-group-item"
active-class="active"
to="/home">Home
</router-link>
</div>5.使用router-view實現組件的呈現（類似于插槽）
<divclass="panel-body">
<!-- 指定組件的呈現位置 -->
<router-view>
</router-view>
</div>注：1.路由組件通常存放在pages文件夾，所以不要往components文件夾里面放了
2.通過切換，“隱藏” 了的路由組件，默認是被銷毀掉的，需要的時候再去掛載
3.每個組件都有自己的$route屬性，里面存儲著自己的路由信息。
4.整個應用只有一個router, 可以通過組件的$router屬性獲取到。
4.多級路由
在配置路由規(guī)則的以及路由里面進行配置下一級路由使用children:[ { } ]這種形式
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
},
]5.路由傳參
有兩種方式，第一種就是直接再路徑里面寫query參數，第二種就是params傳參
路由命名（簡化代碼）
再to的時候就不用寫一大堆路徑了
1.params
1. 配置路由聲明接受params參數
children:[
{
name:'xiangqing',
path:'detail/:id/:title',// 使用占位符聲明接收參數
component:Detail,
}
]2.傳遞參數
<!-- 跳轉路由并攜帶params參數，to的字符串寫法 -->
<router-link:to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
<!-- 跳轉路由并攜帶params參數，to的對象寫法 -->
<router-link
:to="{
// 簡化路徑代碼
name:'xiangqing',// 必須使用name，不能使用path
// params:所攜帶的參數
params:{
id:m.id,
title:m.title,
}
}"
>{{m.title}}</router-link>3，接受參數
<div>
<ul>
<!-- params寫法 -->
<li>消息：{{$route.params.id}}</li>
<li>編號：{{$route.params.title}}</li>
</ul>
</div>2.路由的props配置
一共有三種配置方法，分別是對象式，布爾值式，函數式目的是讓路由組件更方便的接受到參數
children: [{
name: 'xiangqing',
// path: 'detail/:id/:title', // 使用占位符聲明接收參數
path: 'detail', // query不使用占位符聲明接收參數
component: Detail,
// props的第一種寫法
// props:{a:"1",b:"2"},
// 第二種寫法,值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數，以props的形式傳給Detail
// props:true,
// props的第三種寫法，值為函數
props($route) {// 使用解構賦值連續(xù)寫法簡化代碼
return {id:$route.query.id,title:$route.query.title}
}
// props({query:{id,title}}) {// 使用解構賦值連續(xù)寫法簡化代碼
// return {id,title}
// }
}]3.<router -link>的replace屬性
1.作用:控制路由跳轉時操作瀏覽器歷史記錄的模式
2.瀏覽器的歷史記錄有兩種寫入方式:分別為push和replace，push 是追加歷史記錄，replace 是替換當前記錄。路由跳轉時候默認為push，所以為push的時候可以進行后退前進操作，而replace直接就是替換掉之前的那個地址所以在replace的里面智慧存在一個地址，也就是當前所呈現的那個地址，就好比做核算，push是排隊的人，replace是做核酸的醫(yī)務人員
3.如何開啟replace模式:<router-link replace ...... >News</router- link>即可
4.編程式路由導航
1.作用:不借助<router- link>實現路由跳轉，讓路由跳轉更加靈活
methods: {
//后退
back() {
this.$router.back();
},
//前進
forward() {
this.$router.forward();
},
//可以后退也可以前進
test() {
this.$router.go(-2);
}
}5.緩存路由組件
1.作用:讓不展示的路由組件保持掛載,不被銷毀。
2.具體實現方法
<keep-alivelinclude= "News"> K router-view></router-view> </keep-alive>
兩個新的生命周期鉤子
1.作用:路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)分別是activated 路由組件被激活時觸發(fā)。deactivated 路由組件失活時觸發(fā)。
6.路由守衛(wèi)
作用:對路由進行權限控制
分類:全局守衛(wèi)、獨享守衛(wèi)、組件內守衛(wèi)
1.全局守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) {//判斷是否需要鑒權
if (localStorage.getItem('school') ==='shanyu') {
next();
} else {
alert('該學校無權限查看此內容')
}
} else {
next()
}
})
// 后置路由守衛(wèi)，切換路由后調用
router.afterEach((to, from) => {
console.log(to, from);
document.title=to.meta.title||'山魚屋'
})2.獨享路由守衛(wèi)
專門服務于一個路由的守衛(wèi)
beforeEnter: (to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) { //判斷是否需要鑒權
if (localStorage.getItem('school') ==='shanyu') {
next();
} else {
alert('該學校無權限查看此內容')
}
} else {
next()
}
},3.組件內守衛(wèi)
在進入/離開組件時被激活
//進入守衛(wèi):通過路由規(guī)則，進入該組件時被調用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi):通過路由規(guī)則，離開該組件時被調用
beforeRouteLeave (to, from, next) {
?}4.路由器的兩種工作模式
對于一個url來說#其后面的內容就是hash值。
就是這個#后面的
hash的特點及使用
1.hash值不會帶給服務器。
2.hash模式
- 1.地址中永遠帶著#號
- 2.若以后將地址通過第三方手機app分享，若app校驗嚴格, 則地址會被標記為不合法。
- 3.兼容性較好。
3.history模式
- 1.地址干凈，美觀。
- 2.兼容性和hash模式相比略差。
- 3. 應用部署上線時需要后端人員支持，解決刷新頁面服務端404的問題。
4.切換history模式
在route文件夾下面的index文件里添加 `mode: 'history'`這句代碼即可（默認的是hash模式）
寫在最后
到此這篇關于Vue中的路由與多種守衛(wèi)的文章就介紹到這了,更多相關Vue路由守衛(wèi)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue-cli3項目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關于vue-cli3項目配置eslint代碼規(guī)范的完整步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了vue的面包屑導航組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue3在table里使用elementUI的form表單驗證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue之創(chuàng)建項目及目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
給大家分享了關于Vue.js想成為高手的5個總要知識點，需要的朋友可以學習下。2018-04-04
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了mpvue小程序開發(fā)之 實現一個彈幕評論功能，本文通過實例講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
本文主要介紹了vue element多圖片預覽實現的相關資料,最近的項目中有圖片預覽的場景,本文就來介紹一下如何使用,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了關于vue項目proxyTable配置和部署服務器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在基于vue-cli項目開發(fā)過程中，多語言切換功能可使用vue-i18插件，這篇文章分步驟給大家介紹了Vue中使用vue-i18插件實現多語言切換功能，感興趣的朋友一起看看吧2018-04-04