1, 什么是路由守衛(wèi)?
路由守衛(wèi)也叫路由鉤子函數(shù), 它是在路由跳轉(zhuǎn)過(guò)程中調(diào)用的函數(shù), 通過(guò)路由守衛(wèi)可獲取路由信息和阻止路由跳轉(zhuǎn)
2, 有哪些路由守衛(wèi)?
路由守衛(wèi)有以下三種:
組件內(nèi)的路由守衛(wèi):? beforeRouteEnter()? beforeRouterUpdate()? beforeRouteLeave()
全局路由守衛(wèi): beforeEach()? ? afterEach()
單個(gè)路由守衛(wèi):? beforeEnter()
3, 路由守衛(wèi)有哪些參數(shù), 作用是什么?
路由守衛(wèi)的參數(shù)有三個(gè): to, from , next
to: 表示路由跳轉(zhuǎn)的目標(biāo)信息對(duì)象 (到哪兒去)
from: 表示路由跳轉(zhuǎn)的來(lái)源信息對(duì)象(從哪兒來(lái))
next: 回調(diào)函數(shù), 表示是否允許路由跳轉(zhuǎn), 調(diào)用允許, 不調(diào)用則禁止
4, 什么時(shí)候用路由守衛(wèi)??
beforeRouteEnter,? beforeEnter, beforeEach, 這三個(gè)都是路由進(jìn)入之前的守衛(wèi),? 這些路由守衛(wèi)常用于做登錄認(rèn)證, 在這里判斷用戶是否已經(jīng)登錄, 如果已經(jīng)登錄,調(diào)用next()允許進(jìn)入, 如果沒(méi)有登錄, 不調(diào)用next(),禁止進(jìn)入? 主要針對(duì)一些需要登錄狀態(tài)才能訪問(wèn)的頁(yè)面, 如: 個(gè)人信息頁(yè)
beforeRouteLeave? 是路由離開之前的守衛(wèi), 在一些表單頁(yè)面, 在這個(gè)函數(shù)中提示, 離開頁(yè)面, 填寫的表單信息會(huì)丟失? ? 如: 在線測(cè)試頁(yè)面, 測(cè)試提交之前, 不允許離開這一頁(yè)
beforeRouteUpdate 是路由更新時(shí)調(diào)用的鉤子函數(shù), 當(dāng)路由路徑來(lái)源和目標(biāo)相同(當(dāng)前頁(yè)跳轉(zhuǎn)當(dāng)前頁(yè)),并且參數(shù)不同時(shí), 會(huì)調(diào)用這個(gè)鉤子,? 常用于搜索頁(yè), 當(dāng)搜索關(guān)鍵字改變時(shí), 在這里更新數(shù)據(jù)
5, 使用路由守衛(wèi)需要注意哪些問(wèn)題?
(1) 由于在任何組件中都能使用this.$router, 所以全局路由守衛(wèi)可以在任意組件中調(diào)用
(2) beforeRouteEnter路由進(jìn)入之前,組件還未創(chuàng)建,打印this是undefined, 如果想用組件對(duì)象,可以在next()的回調(diào)中拿到組件對(duì)象? next( vm=>{ console.log(vm)? })
(3) this.$router 是/src/router/index.js中創(chuàng)建的路由對(duì)象, 全局唯一, 用于編程式導(dǎo)航跳轉(zhuǎn)和全局路由守衛(wèi)
? ? this.$route? 是路由跳轉(zhuǎn)的信息對(duì)象, 每一個(gè)路由對(duì)應(yīng)一個(gè)$route對(duì)象, 用于路由傳值和路由監(jiān)聽
(4) 路由監(jiān)聽和路由守衛(wèi)的區(qū)別:
路由監(jiān)聽: 在組件中watch字段中監(jiān)聽$route, 實(shí)現(xiàn)路由監(jiān)聽, 只能監(jiān)聽路由變化, 不能修改路由和限制路由跳轉(zhuǎn)
路由守衛(wèi): 使用路由鉤子函數(shù)實(shí)現(xiàn)守衛(wèi), 路由守衛(wèi)不止可以監(jiān)聽路由, 還能控制路由跳轉(zhuǎn)
(5) 當(dāng)路由跳轉(zhuǎn)時(shí), 跳轉(zhuǎn)的路徑和參數(shù)與當(dāng)前完全一致, 沒(méi)有變化, 不會(huì)調(diào)用路由鉤子函數(shù), 會(huì)報(bào)錯(cuò)NavigationDuplicated: Avoided redundant navigation to current location: "/about?page=5".
解決方案如下: 在/src/router/index.js中添加如下代碼:? 原理是捕獲push函數(shù)報(bào)錯(cuò), 不拋出錯(cuò)誤
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
? return originalPush.call(this, location).catch(err => {
? ? //throw(err) // 拋出錯(cuò)誤,控制臺(tái)會(huì)顯示錯(cuò)誤信息, 如果不拋出,控制臺(tái)不會(huì)報(bào)錯(cuò)
? ? return err;
? })
}
