vue-router3.5.3动态添加嵌套子路由失效、URL重复问题

环境信息 #

• 依赖版本：vue-router@^3.5.3
• 初始路由结构：

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', 
      component: User, 
      name:'User',
      children: [
        {
          path: 'profile', 
          component: Profile, 
          name:'Profile',
          children: [
            {
              path: 'about', 
              component: About, 
              name:'About',
              children: [
                {
                  path: 'details', 
                  component: Details, 
                  name: 'Details'
                }
              ]
            }
         ]
        }
      ]
    }
  ]
})

需求 #

向四级嵌套路由Details下动态新增子路由。

原有方案的问题原因 #

• 直接修改this.$router.options.routes中查找到的目标路由对象，向children数组push新路由后页面空白、URL无变化：router.options仅为初始化时传入的配置快照，Vue Router内部会基于该配置生成独立的路由记录映射表，直接修改原始配置不会同步更新内部匹配逻辑，新路由无法被识别。
• 重新传入完整父级路由链调用addRoutes出现URL路径重复拼接：addRoutes方法默认将传入的所有路由注册为顶级路由，嵌套路径会被重复解析，导致最终生成的路径多拼接一层父级地址，无法匹配到对应组件。

正确实现方案 #

Vue Router 3.5+版本已提供按父路由名添加子路由的API，不需要手动递归查找修改路由配置，也不需要重复注册父级路由，实现代码如下：

// 定义需要新增的子路由配置
const newRoute = {
  path: 'extra', // 写相对路径即可，不要加前缀/，不要写全路径
  name: 'DetailsExtra',
  component: () => import('@/views/DetailsExtra.vue')
}

// 直接指定父路由名称，添加子路由
this.$router.addRoute('Details', newRoute)

// 触发路由重新匹配，解决添加后首次访问不渲染的问题
// 如果需要直接跳转到新路由，传入对应路由参数即可
this.$router.replace({
  name: 'DetailsExtra',
  params: this.$route.params // 继承父路由的动态参数，例如示例中的:id
})

注意事项 #

• 新增子路由的path字段不要以/开头，否则会被识别为根级路由，丢失嵌套层级关系。
• 不需要手动维护router.options.routes数组，addRoute调用后内部路由记录会自动更新。
• 如果需要做权限路由批量添加，只要按层级依次指定父路由名调用addRoute即可，不会出现路径重复问题。

内容的提问来源于stack exchange，提问作者EaBengaluru