我采用的整体布局是上下布局，然后我希望我的主体区域是一个路由页面：其中左侧是一个公用的二级导航，右侧则在4个子路由页面中来回变换。但是您的项目要求使用json数据

如何实现子路由在 <router-view> 中的切换？,about halseyspicy/geeker-admin

Comments (1)

AnnCY1 commented on June 4, 2024

已经解决了，原来是作者为了方便添加路由，把路由从有children的二层数组扁平化为一层数组了，导致子路由必须写完整路径才行，解决方案如下：
在 /src/routers/modules/dynamicRouter.ts 文件中把相关代码替换掉

    // 3.添加动态路由(扁平化添加路由的方式会把子路由提升到和父路由同级，便无法在父路由中使用router-view标签来切换子路由 )
    // authStore.flatMenuListGet.forEach(item => {
    //   item.children && delete item.children
    //   if (item.component && typeof item.component == 'string') {
    //     item.component = modules['/src/views' + item.component + '.vue']
    //   }
    //   if (item.meta.isFull) {
    //     router.addRoute(item as unknown as RouteRecordRaw)
    //   } else {
    //     router.addRoute('layout', item as unknown as RouteRecordRaw)
    //   }
    // })

   // 3.添加动态路由
    const routeList = authStore.authMenuListGet.map(item => {
      const routeItem = {
        path: item.path,
        name: item.name,
        component: typeof item.component == 'string' ? modules['/src/views' + item.component + '.vue'] : null,
        meta: item.meta,
        children: [] as any
      }
      // 如果当前路由有子路由，则遍历子路由项并创建对应的子路由配置对象
      if (item.children && item.children.length > 0) {
        routeItem.children = item.children.map(child => ({
          path: child.path,
          name: child.name,
          component: typeof child.component == 'string' ? modules['/src/views' + child.component + '.vue'] : null,
          meta: child.meta
        }))
      }
      return routeItem
    })

    // 将路由配置数组动态添加到 Vue Router 中
    routeList.forEach((route: RouteRecordRaw) => {
      if (route.meta?.isFull) {
        router.addRoute(route as unknown as RouteRecordRaw)
      } else {
        router.addRoute('layout', route as unknown as RouteRecordRaw)
      }
    })