Vue使用addRoutes动态添加路由之后，侧边栏存在多级时，点击子栏出现刷新问题

Question

问题描述

1. 地图和组件都是动态获取的侧边栏数据
2. 问题出现的情况是当使用addRoutes动态添加侧边栏之后出现的点击侧边栏刷新问题
3. 如果当前的侧边栏下面没有子节点的时候就不会刷新，选中地图的时候就不会出现刷新
4. 点击组件下面的子节点就会出现整个页面刷新问题，整个页面都会被刷新，侧边栏也会出现关闭状态再出现展开状态

代码如下

1. 路由信息

{
    path: "/amap",
    component: Layout,
    children: [
        {
            path: "index",
            component: () => import("@/views/map"),
            name: "amap",
            meta: {title: "地图", icon: "map"}
        }
    ]
},
{
    path: "/components",
    component: Layout,
    meta: { title: "组件", icon: "components" },
    redirect: "/components/richtext",
    children: [
        {
            path: "richtext",
            meta: { title: "富文本编辑器", icon: "richtext" },
            name: 'richtext',
            component: () => import("@/views/components/richtext")
        },
        {
            path: "markdown",
            meta: { title: "Markdown编辑器", icon: "markdown" },
            name: "markdown",
            component: () => import("@/views/components/markdown")
        }
    ]
}

1. 动态添加侧边栏

// 整理成为新的路由
const creatRouter = (asyncRoutes, routerList) => {
    const getAsyncRouter = getRouter(asyncRoutes, routerList)
    const getRouterList = deepClone(constantRoutes)
    // 1.重置路由信息
    resetRouter()
    // 2.添加路由信息
    router.addRoutes(getAsyncRouter)
    // 3. 设置侧边栏的路由信息
    const RouterArr = getRouterList.concat(RouterList)
    return RouterArr
}

Answer 1

你这个路由应该配置有问题,配置如下

routes: [
    {
      path:'/',
      name:'index',
      redirect:'/home'
    },
    {
      path: '/',
      name: 'index',
      component: index,
      children:[
        {
          path:'/amap',
          name:'map',
          component:map
        },
        {
          path:'/richtext',
          name:'richtext',
          component:richtext
        },
        {
          path:'/markdown',
          name:'markdown',
          component:markdown
        },
        ....
    ]
    },
    {
      path:'/login',
      name:'Login',
      component:login
    },
  ]