如何解決vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問題

這篇文章主要介紹了如何解決vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比安徽網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式安徽網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋安徽地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

先貼一波官方文檔的內(nèi)容

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

• from: Route: 當(dāng)前導(dǎo)航正要離開的路由

• next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

• next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。

• next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

• next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。

• next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)。確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved

然后這是我自己的總結(jié)

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login'
import Index from '../pages/index/Index'
import Library from '../pages/library/Library'
import Design from '../pages/design/Design'
import Administration from '../pages/administration/Administration'
import Production from '../pages/production/Production'

import Global from '../common/global/Global'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  name: 'login',
  component: Login
 }, {
  path: '/index',
  name: 'index',
  component: Index
 }, {
  path: '/library',
  name: 'library',
  component: Library
 }, {
  path: '/design',
  name: 'design',
  component: Design
 }, {
  path: '/administration',
  name: 'administration',
  component: Administration
 }, {
  path: '/production',
  name: 'production',
  component: Production
 }
 ]
})

router.beforeEach ((to,from,next) => {
 //將所有需要登陸才顯示的頁(yè)面的路由都放進(jìn)一個(gè)數(shù)組
 const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
 //獲取登陸狀態(tài)
 let isLogin = Global.isLogin
 
 if(to.name === 'login') { //如果是登錄頁(yè)，則跳過驗(yàn)證
 next() //必不可少
 return //以下的代碼不執(zhí)行
 }
 if(nextRoute.indexOf(to.name) >= 0) { //判斷該頁(yè)面是否需要登陸
 if(!isLogin) { //判斷登陸狀態(tài)
  next({ name : 'login'}) //如果未登錄，則跳轉(zhuǎn)到登錄頁(yè)
 } else {
  next() //如果已經(jīng)登陸，那就可以跳轉(zhuǎn)
 }
 } else { //其他的無(wú)需登陸的頁(yè)面不做驗(yàn)證
  next()
 }
 
})

export default router

這樣就實(shí)現(xiàn)了全局路由守衛(wèi)

關(guān)于路由守衛(wèi)無(wú)限循環(huán)問題

如果你的代碼是這樣

 if(isLogin) {
 next()
 } else {
 next({ name: 'login')}
 }

這樣的話就會(huì)陷入無(wú)限循環(huán)

因?yàn)槟愕?nbsp;  next({ name: 'login')} 是相當(dāng)于一個(gè)路由跳轉(zhuǎn)，它會(huì)再次觸發(fā)全局路由守衛(wèi)，你又進(jìn)入了全局路由守衛(wèi)進(jìn)行再次判斷，如此循環(huán)。

所以，想要結(jié)束路由守衛(wèi)，整段代碼的邏輯必須由 next() 進(jìn)行結(jié)尾。比如像我上面寫的，當(dāng)需要進(jìn)入登錄頁(yè)的時(shí)候，

 if(to.name === 'login') { 
 next() 
 return 
 }

加上這個(gè)判斷，當(dāng)你進(jìn)入登錄頁(yè)的時(shí)候也會(huì)調(diào)用next() , 路由守衛(wèi)進(jìn)入確認(rèn)狀態(tài)，路由才會(huì)進(jìn)行跳轉(zhuǎn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前題目：如何解決vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問題
當(dāng)前URL：http://m.kartarina.com/article6/jeddog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、虛擬主機(jī)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)