欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明

 更新時(shí)間：2022年10月08日 11:43:57   作者：冷太陽a  
這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

router.beforeEach與beforeRouteEnter的區(qū)別

使用場景

在路由跳轉(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ù)

顧名思義，它是對全局有效的一個(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)入的路由對象
  • from:當(dāng)前導(dǎo)航即將離開的路由
  • 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

這里簡單說下鉤子函數(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ì)遇到如下問題：

router.beforeEach((to, from, next) => {
//判斷登錄狀態(tài)簡單實(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){ //如果有就直接到首頁咯
next();
} else {
if(to.path=='/login'){ //如果是登錄頁面路徑，就直接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)

頁面加載之前執(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)

頁面加載之后執(zhí)行，有兩個(gè)參數(shù)，沒有next

router.afterEach((to,from) => {
? console.log(to);//到達(dá)的路由
? console.log(from);//離開的路由
})
  • to：到哪個(gè)路由去
  • from：從哪個(gè)路由來
  • 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ì)陷入死循環(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í)的邏輯,寫在某個(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) {
? ? // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
? ? // 不！能！獲取組件實(shí)例 `this`
? ? // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
? ? // 舉例來說，對于一個(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)用。
? ? // 可以訪問組件實(shí)例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
? ? // 可以訪問組件實(shí)例 `this`
?
? }

小栗子1：當(dāng)頁面中有需要保存的信息時(shí)，阻止頁面進(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ì)看

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論