Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明
router.beforeEach與beforeRouteEnter的區(qū)別
使用場(chǎng)景
在路由跳轉(zhuǎn)的時(shí)候,我們需要一些權(quán)限判斷或者其他操作。這個(gè)時(shí)候就需要使用路由的鉤子函數(shù)。
定義
路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的函數(shù)。
兩種函數(shù):
1、router.beforeEach(function(to,form,next){}) /在跳轉(zhuǎn)之前執(zhí)行/
2.router.afterEach(function(to,form))/在跳轉(zhuǎn)之后判斷/
全局鉤子函數(shù)
顧名思義,它是對(duì)全局有效的一個(gè)函數(shù)
// router=>index.js配置全局路由鉤子
router.beforeEach((to, from, next) => {
if(to.fullPath==='/app'){
?? ? next('login')
}else{
?? ? next()
}?
});?beforeEach函數(shù)有三個(gè)參數(shù)
to:router即將進(jìn)入的路由對(duì)象from:當(dāng)前導(dǎo)航即將離開(kāi)的路由next:Function,進(jìn)行管道中的一個(gè)鉤子,如果執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的);否則為false,終止導(dǎo)航。
afterEach函數(shù)不用傳next()函數(shù)
在官方文檔上是這樣定義的:
可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
這里簡(jiǎn)單說(shuō)下鉤子函數(shù)的用法:它是和data,methods平級(jí)的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{},
method: {}PS:在使用vue-router beforeEach鉤子時(shí),你也許會(huì)遇到如下問(wèn)題:
router.beforeEach((to, from, next) => {
//判斷登錄狀態(tài)簡(jiǎn)單實(shí)例
var userInfo = window.localStorage.getItem(‘token');
if (userInfo) {
next();
} else {
next('/login');
}
})然后你會(huì)發(fā)現(xiàn)出現(xiàn)如下錯(cuò)誤:出現(xiàn)dead loop錯(cuò)誤
router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem(‘token');//獲取瀏覽器緩存的用戶信息
if(userInfo){ //如果有就直接到首頁(yè)咯
next();
} else {
if(to.path=='/login'){ //如果是登錄頁(yè)面路徑,就直接next()
next();
} else { //不然就跳轉(zhuǎn)到登錄;
next('/login');
}
}
})vuerouter的幾個(gè)鉤子函數(shù)
主要介紹一下vuerouter的幾種鉤子函數(shù):
全局鉤子(2個(gè))
每次跳轉(zhuǎn)路由時(shí)都會(huì)執(zhí)行這個(gè)鉤子函數(shù),由router調(diào)用
1、beforeEach(to,from,next)
頁(yè)面加載之前執(zhí)行,有三個(gè)參數(shù)
router.beforeEach((to, from, next) => {
? if (to.matched.length === 0) {
? ? from.name ? next({ name : from.name }) : next('/')
? } else {
? ? next()
? }
})2、afterEach(to,from)
頁(yè)面加載之后執(zhí)行,有兩個(gè)參數(shù),沒(méi)有next
router.afterEach((to,from) => {
? console.log(to);//到達(dá)的路由
? console.log(from);//離開(kāi)的路由
})- to:到哪個(gè)路由去
- from:從哪個(gè)路由來(lái)
- next:判斷是否進(jìn)入
next有幾種形式,一一解釋一下
1、next():可以跳轉(zhuǎn)到目標(biāo)路由
2、next(false):不可以跳轉(zhuǎn),回到源路由
3、next(/path):中斷當(dāng)前跳轉(zhuǎn)路徑,跳轉(zhuǎn)到/path指定的路由
4、next(error):當(dāng)前跳轉(zhuǎn)終止,并執(zhí)行router.onError中的回調(diào)函數(shù)
小栗子:可以做一些頁(yè)面跳轉(zhuǎn)前的認(rèn)證,對(duì)一些需要登錄的頁(yè)面進(jìn)行攔截,跳轉(zhuǎn)到登錄頁(yè)面
router.beforeEach((to, from, next) => {
? ? if (to.meta.requireAuth) {
? ? ? ? //判斷該路由是否需要登錄權(quán)限
? ? ? ? if (cookies('token')) {
? ? ? ? ? ? //通過(guò)封裝好的cookies讀取token,如果存在,name接下一步如果不存在,那跳轉(zhuǎn)回登錄頁(yè)
? ? ? ? ? ? next()//不要在next里面加"path:/",會(huì)陷入死循環(huán)
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? next({
? ? ? ? ? ? ? ? path: '/login',
? ? ? ? ? ? ? ? query: {redirect: to.fullPath}//將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? else {
? ? ? ? next()
? ? }
})單個(gè)路由鉤子(2個(gè))
只要用于指定某個(gè)特定路由跳轉(zhuǎn)時(shí)的邏輯,寫(xiě)在某個(gè)路由配置內(nèi)部
1、beforeEnter()
2、beforeLeave()
const routes = [
? ? {
? ? ? ? path: '/home',
? ? ? ? component: Home
? ? ? ??
? ? ? ? beforeEnter;(to,from,next) => {
? ? ? ? ? ? console.log(to)
? ? ? ? }
?
? ? ? ? beforeLeave:(to,from,next) => {
? ? ? ? ? ? console.log(from)
? ? ? ? }
? ? }組件內(nèi)部鉤子(3個(gè))
在組件內(nèi)使用
1、beforeRouterEnter()
2、beforeRouterLeave()
3、beforeRouterUpdate():下一次更新之前
beforeRouterEnter(to,from,next){
? ? console.log(to)
}
const Foo = {
? template: `...`,
? beforeRouteEnter (to, from, next) {
? ? // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
? ? // 不!能!獲取組件實(shí)例 `this`
? ? // 因?yàn)楫?dāng)鉤子執(zhí)行前,組件實(shí)例還沒(méi)被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用
? ? // 舉例來(lái)說(shuō),對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候,
? ? // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
? ? // 可以訪問(wèn)組件實(shí)例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
? ? // 可以訪問(wèn)組件實(shí)例 `this`
?
? }小栗子1:當(dāng)頁(yè)面中有需要保存的信息時(shí),阻止頁(yè)面進(jìn)行跳轉(zhuǎn),讓用戶先保存信息
beforeRouteLeave (to, from, next) {
?//判斷是否彈出框的狀態(tài)和保存信息與否
?if (this.dialogVisibility === true) {
? ? this.dialogVisibility = false //關(guān)閉彈出框
? ? next(false) //回到當(dāng)前頁(yè)面, 阻止頁(yè)面跳轉(zhuǎn)
? }else if(this.saveMessage === false) {
? ? alert('請(qǐng)保存信息后退出!') //彈出警告
? ? next(false) //回到當(dāng)前頁(yè)面, 阻止頁(yè)面跳轉(zhuǎn)
? }else {
? ? next() //否則允許跳轉(zhuǎn)
? }小栗子2:在用戶關(guān)閉頁(yè)面之前保存信息到vuex或session里
beforeRouteLeave (to, from, next) {
? ? localStorage.setItem(name, content); //保存到localStorage中
? ? next()
}注意他們的使用方式,仔細(xì)看
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是Mint UI ,今天給大家普及vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼,一起看看吧2021-06-06
vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路
這篇文章主要介紹了vue使用高德地圖點(diǎn)擊下鉆 上浮效果的實(shí)現(xiàn)思路,本文以浙江省為例通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-10-10
vue項(xiàng)目無(wú)法刪除的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目無(wú)法刪除的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)的大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue監(jiān)聽(tīng)頁(yè)面滾動(dòng)到某個(gè)高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽(tīng)頁(yè)面滾動(dòng)到某個(gè)高度觸發(fā)事件流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

