router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)

采用beforeEach做路由過濾，如果沒登錄就直接跳轉(zhuǎn)到登錄界面，然而發(fā)現(xiàn)個問題就是要么跳轉(zhuǎn)到登錄頁面、然后再調(diào)回首頁，要么卡著不動、要么出現(xiàn)空白頁面。

1、router.beforeEach( to , from ,next) 介紹

• to: 即將路由的地址
• form: 當(dāng)前的路由地址，也就是馬上要離開的地址
• next(): 執(zhí)行進(jìn)入下一個路由
• next(false): 禁止進(jìn)入下一個路由
• next('/login'): 路由到/login地址

2、兩種死循環(huán)問題

（1）路由到相同地址的死循環(huán)

比如在beforeEach中設(shè)置未登錄（userData為null）就跳轉(zhuǎn)到登錄頁面

在非登錄頁面是沒有問題的，但是在登錄頁面就出現(xiàn)了死循環(huán)或者空白頁，通過打印我們發(fā)現(xiàn)瀏覽器在登錄頁反復(fù)跳轉(zhuǎn)。

在登錄頁面因?yàn)闆]登錄，userData為null，這時候通過next(’\login’)就會重定向到登錄頁面，重定向到登錄頁面后，這時候userData依然為空，那么就要繼續(xù)重定向登錄頁面，于是出現(xiàn)了死循環(huán)。

對這種情況加個判斷條件就能解決。

（2）動態(tài)加載路由表出現(xiàn)的死循環(huán)

在beforeEach()通過動態(tài)加載路由表

在beforeEach()中都會獲取路由表存入store，然后從store取出動態(tài)加入此路由表。

但是每次路由之前都會重新添加路由表，每次添加完路由表當(dāng)前默認(rèn)路徑是首頁（to.path顯示內(nèi)容）而不是登陸頁面，頁面會自動跳轉(zhuǎn)到首頁，但是如果這時候通過next(’/login’)跳轉(zhuǎn)到登錄頁面，那么就會重新路由，在路由前又開始重新添加路由表，然后當(dāng)前路徑是首頁，這時候又要跳轉(zhuǎn)到登錄頁面因此就會出現(xiàn)死循環(huán)。

這時候我們就不能反復(fù)加載路由表，加個判斷條件就行了。

vue動態(tài)加載路由進(jìn)入頁面白屏或beforeEach死循環(huán)踩坑

開發(fā)的哥們兒從網(wǎng)上找了一個簡單的框架，通過auth的配置來決定什么權(quán)限可以進(jìn)入到什么頁面。具體操作就是登陸獲取用戶的權(quán)限，然后遍歷本地的總路由表匹配權(quán)限返回當(dāng)前用戶可以訪問的路由表。網(wǎng)上大多數(shù)的方案是從后端接口獲取權(quán)限和路由表。此為兩者之間的差異，但是不影響填坑方案的可行性

先放上本地總路由表部分代碼，就是在這個表中根據(jù)權(quán)限進(jìn)一步遍歷篩選的，通過硬編碼的方式寫在項(xiàng)目中，auth[]內(nèi)用數(shù)字、用中文、用單詞也都是可以的

const routerList = [{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    auth: [0, 1, 2],
    meta: {
      title: '首頁',
      icon: 'dashboard'
    },
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
        title: '首頁',
        icon: 'dashboard'
      },
      auth: [0, 1, 2]
    }]
  },
  {
    path: '/enterprises',
    component: Layout,
    name: 'Enterprises',
    redirect: 'noRedirect',
    auth: [0, 1, 2],
    meta: {
      title: '智慧園區(qū)',
      icon: 'el-icon-office-building'
    },
    children: [
      {
        path: 'huanjingjiance',
        name: 'huanjingjiance',
        component: () => import('@/views/environment/monitor'),
        auth: [0, 2],
        meta: {
          title: '環(huán)境監(jiān)測'
        },
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    name: 'User',
    redirect: 'noRedirect',
    auth: [0, 1],
    meta: {
      title: '人員信息',
      icon: 'el-icon-user'
    },
    children: [{
      path: 'index',
      name: 'Index',
      component: () => import('@/views/user/index'),
      meta: {
        title: '個人信息'
      },
      auth: [0, 1],
    }]
  }
]

首先在路由中需要指定登錄的頁面，這個是不分權(quán)限的，所以不需要動態(tài)獲取

const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  ...dynamicRouter
]

var createRouter = () => new Router({
  mode: 'history',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

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

最新評論