關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
更新時間：2017年09月09日 15:34:05 作者：安木貝神
本篇文章主要介紹了關(guān)于vue-router的beforeEach無限循環(huán)的問題解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近在使用vue-router的beforeEach鉤子時候遇到了一個問題，就是在beforeEach()中設(shè)置好判斷條件后出現(xiàn)了無限循環(huán)的問題
代碼如下：
router.beforeEach((to, from, next) => {
if(isLogin){
next()
}else{
console.log('測試')
next('login')
}
})
結(jié)果chrome的debug中看到：
這個問題我是這樣理解的：
router.beforeEach((to, from, next) => {
if(true){
next()
}else{
next('login')
}
})
- next() 表示路由成功，直接進(jìn)入to路由，不會再次調(diào)用router.beforeEach()
- next('login') 表示路由攔截成功，重定向至login，會再次調(diào)用router.beforeEach()
也就是說beforeEach()必須調(diào)用next(),否則就會出現(xiàn)無限循環(huán)，next() 和 next('xxx') 是不一樣的，區(qū)別就是前者不會再次調(diào)用router.beforeEach()，后者會?。。?/p>
官網(wǎng)這樣寫的（主要是紅線標(biāo)記的那句?。?/p>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue在解析我們的組件時， 是通過打包成一個 js 文件，當(dāng)我們的一個組件 引入過多子組件是，頁面的首屏加載時間 由最后一個組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下2022-12-12
Vue狀態(tài)機(jī)的開啟與停止操作詳細(xì)講解
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Vue-cli配置打包文件本地使用的教程圖解,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
本文通過實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
vue項目實(shí)現(xiàn)對某個區(qū)域繪制水印
這篇文章主要為大家詳細(xì)介紹了vue項目實(shí)現(xiàn)對某個區(qū)域繪制水印，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
kiss-vuex 是一個非常簡單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實(shí)用價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
在使用vue-router的項目中,實(shí)例化VueRouter是其配置選項routes該選項指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系，Router配置選項中是其中最重要的配置。本文就詳細(xì)的介紹一下2021-10-10
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說就是使用配置文件來管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11