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