vue-element-plus-admin 左侧菜单通过按钮事件添加新菜单，缺少顶部和左侧布局是什么原因？

Question

vue-element-plus-admin 左侧菜单通过按钮事件添加新菜单，缺少顶部和左侧布局是什么原因？

页面代码：

// 添加菜单
const addMenuItem = () => {
    let index = parseInt(Math.random() * 1000000)
    const obj = {
      path: 'xitong/id=' + index,
        component: () => import('@/views/Projectbrowsing/duolianjixitong/xitong/systemTabShow.vue'),
        name: 'Xitong' + index,
        meta: {
          title: tjxtzd.name
        }
    }
    router.addRoute({
      path: '/projectbrowsing/duolianjixitong/xitong/id=' + index,
        component: () => import('@/views/Projectbrowsing/duolianjixitong/xitong/systemTabShow.vue'),
        name: 'Xitong' + index,
        meta: {
          title: tjxtzd.name
        }
    })
      console.log(router.getRoutes());//数据正确
      permissionStore.generateRoutes('addRouteItem',{},obj)
  })
}

store/permission.ts文件：

actions: {
    generateRoutes(
      type: 'admin' | 'test' | 'none' | 'addRouteItem' ,
      routers?: AppCustomRouteRecordRaw[] | string[],
      routeItem?: {}
    ): Promise<unknown> {      
      return new Promise<void>((resolve) => {
        let routerMap: AppRouteRecordRaw[] = []
        // 直接读取静态路由表
        routerMap = cloneDeep(asyncRouterMap)
        // 动态路由，404一定要放到最后面
        this.addRouters = routerMap.concat([
          {
            path: '/:path(.*)*',
            redirect: '/404',
            name: '404Page',
            meta: {
              hidden: true,
              breadcrumb: false
            }
          }
        ])
        
        if(type == "addRouteItem"){
          // 渲染菜单的所有路由 + 新系统路由
          const oldRoutes = cloneDeep(constantRouterMap).concat(routerMap)
          oldRoutes.forEach((item) => {
            if(item.name == "Projectbrowsing"){
              item.children.forEach((itemChildren) => {
                if(itemChildren.name == "Duolianjixitong"){
                  itemChildren.children?.push(routeItem)
                }
              })
            }
          })
          //console.log(oldRoutes);
          this.routers = reactive(oldRoutes)
        } else {
          // 渲染菜单的所有路由
          this.routers = cloneDeep(constantRouterMap).concat(routerMap)
        }
        resolve()
      })
    },

打开页面缺少 顶部和左侧布局，

Answer 1

//添加事件
const add = () =>{
  permissionStore.generateRoutes2([
    {
      path: 'Test',
      name: 'Test',
      component: function(){return import('@/views/Test/Menu2.vue')},
      meta: {
        title: '测试'
      }
    }
  ])

  permissionStore.getRouters.forEach((route) => {
    if (route.name === "Level") {
      router.addRoute(route as any)//动态添加可访问路由表
    }
  })
}

    //添加 系统新菜单
    generateRoutes2(routers: any[]) {
      return new Promise<void>((resolve) => {
        const oldRouters = cloneDeep(this.routers)
        oldRouters.map((item) => {
          if(item.name === "Level" && item.children){
            item.children.map((item1) => {
              if(item1.name === "Menu1" && item1.children){
                item1.children = item1.children.concat(routers)
              }
            })
            //item.children = item.children.concat(routers)
          }
        })
        this.routers = cloneDeep(oldRouters)
        resolve()
      })
    },