vue添加动态路由踩坑

前几天朋友问我一个问题 vue 角色权限区分添加动态路由时刷新动态组件不加载是啥子情况，于是踏上了一行行找问题的路…

好吧我承认，作为一个小白整整用了一天的时间才找到问题…
话不多说，直接po代码

vuex部分

state: {
    userInfo: userinfo,
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    setUserInfo (state, userInfo) {
      state.userInfo = userInfo
    },
    SET_ROUTERS: (state, routers) => {
      console.log()
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes ({ commit }, data) {
      const { roles } = data
      const accessedRouters = asyncRouterMap.filter(v => {
        if (roles.indexOf('admin') >= 0) return true
        if (hasPermission(roles, v)) {
          if (v.children && v.children.length > 0) {
            v.children = v.children.filter(child => {
              if (hasPermission(roles, child)) {
                return child
              }
              return false
            })
            return v
          } else {
            return v
          }
        }
        return false
      })
      commit('SET_ROUTERS', accessedRouters)
    }
  },
  getters: {
    addRouters: state => state.routers
  }

router部分

export const constantRouterMap = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/test',
    component: Test
  }
]

export const asyncRouterMap = [
  {
    path: '/power',
    name: 'power',
    meta: {
      // 标记需要登录
      auth: true,
      role: ['admin', 'user', 'superadmin']
    },
    component: Power,
  },
  // 重定向
  { path: '*', redirect: '/404', hidden: true }
]
let router = new Router({
  mode: 'history',
  routes: constantRouterMap
})
router.beforeEach((to, from, next) => {
  if (store.state.userInfo.token) {
    const roles = store.state.userInfo.role
    store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
      router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
      next()
    })
  } else {
    if (to.path === '/about') {
      MessageBox.alert('未登录状态下不能进入此模块', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          next({
            path: '/'
          })
        }
      })
    } else {
      next()
    }
  }
})
export default router

敲黑板划重点了！！！

果然按照如我那位朋友所说，开始进入没有任何问题，但是一刷新动态路由所在页面就会出现页面空白的现象了…

开始进入页面时没有问题
vue添加动态路由踩坑
刷新当前页面就会出现下图不加载视图的问题了

冥思苦想之后终于找到问题所在了，如图

怪只怪自己没有好好看官方文档

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

虽然也想到了是不是因为动态路由没有加载就已经跳转了，但是却默默的加了个延迟…当然结果就是没有任何作用的，无奈，女生的第六感告诉我问题绝对在这里哈哈哈哈哈哈，没办法只能去官方文档里找问题，又刷了一遍router官方文档（链接: 捷径点击这里.）
发现守卫本身就是异步解析执行的（此时内心真的是…），至此便解决了vue 角色权限区分添加动态路由时刷新动态组件不加载的问题

前端小白第一次写博客，还需向各位大佬多多学习！

vue添加动态路由踩坑

vuex部分

router部分

敲黑板划重点了！！！

相关推荐