Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明
router.beforeEach與beforeRouteEnter的區(qū)別
使用場景
在路由跳轉(zhuǎn)的時候，我們需要一些權(quán)限判斷或者其他操作。這個時候就需要使用路由的鉤子函數(shù)。
定義
路由鉤子主要是給使用者在路由發(fā)生變化時進(jìn)行一些特殊的處理而定義的函數(shù)。
兩種函數(shù)：
1、router.beforeEach(function(to,form,next){}) /在跳轉(zhuǎn)之前執(zhí)行/
2.router.afterEach(function(to,form))/在跳轉(zhuǎn)之后判斷/
全局鉤子函數(shù)
顧名思義，它是對全局有效的一個函數(shù)
// router=>index.js配置全局路由鉤子
router.beforeEach((to, from, next) => {
if(to.fullPath==='/app'){
?? ? next('login')
}else{
?? ? next()
}?
});?beforeEach函數(shù)有三個參數(shù)
to:router即將進(jìn)入的路由對象from:當(dāng)前導(dǎo)航即將離開的路由next:Function,進(jìn)行管道中的一個鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）；否則為false，終止導(dǎo)航。
afterEach函數(shù)不用傳next()函數(shù)
在官方文檔上是這樣定義的：
可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
這里簡單說下鉤子函數(shù)的用法：它是和data,methods平級的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{},
method: {}PS：在使用vue-router beforeEach鉤子時，你也許會遇到如下問題：
router.beforeEach((to, from, next) => {
//判斷登錄狀態(tài)簡單實(shí)例
var userInfo = window.localStorage.getItem(‘token');
if (userInfo) {
next();
} else {
next('/login');
}
})然后你會發(fā)現(xiàn)出現(xiàn)如下錯誤：出現(xiàn)dead loop錯誤
router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem(‘token');//獲取瀏覽器緩存的用戶信息
if(userInfo){ //如果有就直接到首頁咯
next();
} else {
if(to.path=='/login'){ //如果是登錄頁面路徑，就直接next()
next();
} else { //不然就跳轉(zhuǎn)到登錄；
next('/login');
}
}
})vuerouter的幾個鉤子函數(shù)
主要介紹一下vuerouter的幾種鉤子函數(shù)：
全局鉤子（2個）
每次跳轉(zhuǎn)路由時都會執(zhí)行這個鉤子函數(shù)，由router調(diào)用
1、beforeEach(to,from,next)
頁面加載之前執(zhí)行，有三個參數(shù)
router.beforeEach((to, from, next) => {
? if (to.matched.length === 0) {
? ? from.name ? next({ name : from.name }) : next('/')
? } else {
? ? next()
? }
})2、afterEach(to,from)
頁面加載之后執(zhí)行，有兩個參數(shù)，沒有next
router.afterEach((to,from) => {
? console.log(to);//到達(dá)的路由
? console.log(from);//離開的路由
})- to：到哪個路由去
- from：從哪個路由來
- 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ù)
小栗子：可以做一些頁面跳轉(zhuǎn)前的認(rèn)證，對一些需要登錄的頁面進(jìn)行攔截，跳轉(zhuǎn)到登錄頁面
router.beforeEach((to, from, next) => {
? ? if (to.meta.requireAuth) {
? ? ? ? //判斷該路由是否需要登錄權(quán)限
? ? ? ? if (cookies('token')) {
? ? ? ? ? ? //通過封裝好的cookies讀取token，如果存在，name接下一步如果不存在，那跳轉(zhuǎn)回登錄頁
? ? ? ? ? ? next()//不要在next里面加"path:/",會陷入死循環(huán)
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? next({
? ? ? ? ? ? ? ? path: '/login',
? ? ? ? ? ? ? ? query: {redirect: to.fullPath}//將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? else {
? ? ? ? next()
? ? }
})單個路由鉤子（2個）
只要用于指定某個特定路由跳轉(zhuǎn)時的邏輯,寫在某個路由配置內(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個）
在組件內(nèi)使用
1、beforeRouterEnter()
2、beforeRouterLeave()
3、beforeRouterUpdate()：下一次更新之前
beforeRouterEnter(to,from,next){
? ? console.log(to)
}
const Foo = {
? template: `...`,
? beforeRouteEnter (to, from, next) {
? ? // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
? ? // 不！能！獲取組件實(shí)例 `this`
? ? // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
? ? // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
? ? // 由于會渲染同樣的 Foo 組件，因此組件實(shí)例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
? ? // 可以訪問組件實(shí)例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
? ? // 可以訪問組件實(shí)例 `this`
?
? }小栗子1：當(dāng)頁面中有需要保存的信息時，阻止頁面進(jìn)行跳轉(zhuǎn)，讓用戶先保存信息
beforeRouteLeave (to, from, next) {
?//判斷是否彈出框的狀態(tài)和保存信息與否
?if (this.dialogVisibility === true) {
? ? this.dialogVisibility = false //關(guān)閉彈出框
? ? next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn)
? }else if(this.saveMessage === false) {
? ? alert('請保存信息后退出!') //彈出警告
? ? next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn)
? }else {
? ? next() //否則允許跳轉(zhuǎn)
? }小栗子2：在用戶關(guān)閉頁面之前保存信息到vuex或session里
beforeRouteLeave (to, from, next) {
? ? localStorage.setItem(name, content); //保存到localStorage中
? ? next()
}注意他們的使用方式，仔細(xì)看
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)
Three.js是一個常見的需求,Three.js是一個用于在瀏覽器中創(chuàng)建和顯示動畫3D計(jì)算機(jī)圖形的JavaScript庫,這篇文章主要介紹了Vue3中如何使用Three.js的相關(guān)資料,包括各種樣例、常見場景、問題及解決方案,需要的朋友可以參考下2025-04-04
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue中如何配置proxy代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了仿vue-cli搭建屬于自己的腳手架的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了vue全局?jǐn)?shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要圍繞Vue的SPA單頁面設(shè)計(jì)展開。SPA(single page application):單一頁面應(yīng)用程序，有且只有一個完整的頁面，對vue router原理感興趣的朋友跟隨小編一起看看吧2018-10-10
關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實(shí)例，該組件將不會銷毀，這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04
diff算法的本質(zhì)是找出兩個對象之間的差異,目的是盡可能復(fù)用節(jié)點(diǎn)。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09