做項(xiàng)目時(shí)遇到的這個(gè)bug，因?yàn)槌颂?04之外也沒(méi)太大影響，之前就一直放著沒(méi)管，現(xiàn)在項(xiàng)目基本功能實(shí)現(xiàn)了，轉(zhuǎn)頭處理了一下，現(xiàn)在在這里記錄一下解決方法

這個(gè)bug的具體情況是：設(shè)置了動(dòng)態(tài)路由之后，不同的用戶登錄之后顯示了不同的側(cè)邊欄，在側(cè)邊欄點(diǎn)擊菜單，渲染對(duì)應(yīng)路由頁(yè)面沒(méi)有任何問(wèn)題，但是在動(dòng)態(tài)路由上當(dāng)我刷新瀏覽器時(shí)會(huì)出現(xiàn)404（這種情況只出現(xiàn)在動(dòng)態(tài)路由上，靜態(tài)路由刷新沒(méi)問(wèn)題）。

動(dòng)態(tài)路由設(shè)置不成功的可以看我之前的文章：vue-element-template 設(shè)置權(quán)限管理配置文件 \ vue用戶權(quán)限管理_vue template設(shè)置-CSDN博客

解決方法一

? ? ? ? 由于通配路由需要放在整個(gè)路由的最后，所以不能放在asyncRouterMap的最后，但是也不能直接放在constantRoutes的最后，因?yàn)樵?strong>動(dòng)態(tài)路由在刷新時(shí)會(huì)跳轉(zhuǎn)到404，因?yàn)樗⑿率莿?dòng)態(tài)路由還沒(méi)加載進(jìn)來(lái)，但是頁(yè)面已經(jīng)進(jìn)行了跳轉(zhuǎn)，找不到匹配的路由，最后會(huì)去到通配路由。

解決方法：

把下面這個(gè)路由從constantRoutes的最后一行轉(zhuǎn)移到asyncRoutes的最后一行即可！

// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }

解決方法二：

????????在使用的過(guò)程中，加入權(quán)限模塊后，刷新后權(quán)限控制的頁(yè)面就默認(rèn)跳轉(zhuǎn)到404頁(yè)面了，原因是權(quán)限控制的路由模塊是動(dòng)態(tài)添加進(jìn)去的，而我的404監(jiān)聽(tīng)路由是在默認(rèn)路由里面的，優(yōu)先級(jí)比動(dòng)態(tài)路由要高，所以刷新后默認(rèn)先被404接管了，改一下，把404監(jiān)聽(tīng)路由注釋掉需要手動(dòng)在動(dòng)態(tài)路由加載后，再把通配路由加上去，所以有了解決方法二
解決方法二：
src/router/index.js，去靜態(tài)路由里把404路由注釋掉

// 靜態(tài)路由,所有人可見(jiàn)
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    // hidden為true表示在側(cè)邊欄不顯示
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    // 二級(jí)路由
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首頁(yè)', icon: 'dashboard' }
    }]
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // 把這里注釋掉，或者刪掉
  // { path: '*', redirect: '/404', hidden: true }
]

然后修改文件：?/src/permission.js，具體位置是下面這段代碼中注釋后面兩行

const res = await store.dispatch('user/getInfo')
let roles = res.info.auth_list
const accessRoutes = await store.dispatch('permission/GenerateRoutes', roles)
let old = JSON.parse(JSON.stringify(router.options))
router.addRoutes(accessRoutes)

// 在這動(dòng)態(tài)添加最后的通配路由，確保先有動(dòng)態(tài)路由、再有通配路由，解決動(dòng)態(tài)路由刷新會(huì)跳轉(zhuǎn)到404問(wèn)題
let lastRou = [{ path: '*', redirect: '/404' }]
router.addRoutes(lastRou)

let newr = JSON.parse(JSON.stringify(router.options))
next({ ...to, replace: true })

/src/permission.js完整代碼【可能每個(gè)人的不同，建議對(duì)照修改而不是復(fù)制】文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-861296.html

// 引入路由器router
import router from './router'
// 引入倉(cāng)庫(kù)
import store from './store'
// 引入ele的提示組件
import { Message } from 'element-ui'
// 引入交互進(jìn)度條
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 從cookie中獲取token，登錄了就有cookie
import { getToken } from '@/utils/auth' // get token from cookie
// 得到頁(yè)面的title
import getPageTitle from '@/utils/get-page-title'

// 配置nprogress
NProgress.configure({ showSpinner: false }) // NProgress Configuration

// 白名單，不需要登錄就能進(jìn)入的路由
const whiteList = ['/login'] // no redirect whitelist

// 全局前置路由守衛(wèi)
router.beforeEach(async(to, from, next) => {
  //開(kāi)啟進(jìn)度條
  NProgress.start()

  //給頁(yè)面的title賦值
  document.title = getPageTitle(to.meta.title)

  // 從cookie中拿到token，有的話就放行，determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      // 獲取用戶信息
      // const hasGetUserInfo = store.getters.name
      const hasRoles = store.getters.roles && store.getters.roles.length > 0// 權(quán)限控制
      console.log('roles:',store.getters.roles)
      // if (hasGetUserInfo) {
      if (hasRoles) {
        console.log('執(zhí)行了1')
        next()
      } else {
        console.log('執(zhí)行了2')
        try {
          // get user info 重新獲取用戶信息
          // await store.dispatch('user/getInfo')
          // 權(quán)限控制
          console.log('tore.getters.roles:',store.getters.roles)
          const { roles } = await store.dispatch('user/getInfo')
          // 在角色權(quán)限基礎(chǔ)上生成動(dòng)態(tài)路由表
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          console.log('accessRoutes:',accessRoutes)
          router.options.routes = store.getters.permission_routes 
          // 動(dòng)態(tài)添加可訪問(wèn)路由
          router.addRoutes(accessRoutes)
          // 在這動(dòng)態(tài)添加最后的通配路由，確保先有動(dòng)態(tài)路由、再有通配路由，解決動(dòng)態(tài)路由刷新會(huì)跳轉(zhuǎn)到404問(wèn)題
          let lastRou = [{ path: '*', redirect: '/404' }]
          router.addRoutes(lastRou)
          console.log('輸出的store：',store)
          next({...to, replace: true })
          
          // next()

        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      // 關(guān)閉進(jìn)度條
      NProgress.done()
    }
  }
})

// 全局后置路由守衛(wèi)
router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

到了這里，關(guān)于vue-element-admin vue設(shè)置動(dòng)態(tài)路由 刷新頁(yè)面后出現(xiàn)跳轉(zhuǎn)404頁(yè)面Bug 解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！