vue添加动态路由踩坑

最新推荐文章于 2025-08-03 09:17:22 发布

原创

最新推荐文章于 2025-08-03 09:17:22 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue动态路由 #vue-router #vue全局前置守卫 #vue addRoutes

本文记录了在Vue项目中遇到的动态路由刷新后组件不加载的问题。通过分析Vuex和Vue Router部分的代码，重点指出全局前置守卫在异步解析执行时可能引发的导航等待状态，导致动态路由无法正确加载。解决方案在于正确理解和使用Vue Router的守卫机制，确保动态路由在守卫解析完成后再进行跳转。

前几天朋友问我一个问题 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</