最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題詳析

 更新時間:2019年09月05日 14:48:45   作者:翔啊翔阿翔  
這篇文章主要給大家介紹了關(guān)于vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

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

  • to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
  • from: Route: 當(dāng)前導(dǎo)航正要離開的路由
  • next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
    • next(): 進(jìn)行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
    • next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。
    • next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個新的導(dǎo)航。你可以向 next 傳遞任意位置對象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
    • next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實(shí)例,則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。確保要調(diào)用 next 方法,否則鉤子就不會被 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) => {
 //將所有需要登陸才顯示的頁面的路由都放進(jìn)一個數(shù)組
 const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
 //獲取登陸狀態(tài)
 let isLogin = Global.isLogin
 
 if(to.name === 'login') { //如果是登錄頁,則跳過驗證
 next() //必不可少
 return //以下的代碼不執(zhí)行
 }
 if(nextRoute.indexOf(to.name) >= 0) { //判斷該頁面是否需要登陸
 if(!isLogin) { //判斷登陸狀態(tài)
  next({ name : 'login'}) //如果未登錄,則跳轉(zhuǎn)到登錄頁
 } else {
  next() //如果已經(jīng)登陸,那就可以跳轉(zhuǎn)
 }
 } else { //其他的無需登陸的頁面不做驗證
  next()
 }
 
})

export default router

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

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

如果你的代碼是這樣

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

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

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

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

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

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

以上就是我在學(xué)習(xí)vue-router的路由守衛(wèi)的總結(jié)

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論

灵武市| 久治县| 高雄县| 岑溪市| 大埔县| 乐昌市| 南丰县| 项城市| 洮南市| 定西市| 金昌市| 大埔县| 阿拉善左旗| 巧家县| 垫江县| 嘉定区| 大荔县| 凤山县| 浦东新区| 江城| 弥勒县| 镇平县| 神木县| 龙江县| 探索| 伊川县| 岫岩| 莱阳市| 察哈| 镇赉县| 吴旗县| 富平县| 安平县| 日照市| 宾阳县| 临潭县| 和顺县| 沂水县| 郁南县| 四川省| 西和县|