多级路由

[CleanWaterjx]

大佬,感谢你写了这个开源库，麻烦你百忙之中讲解一下多级路由

文档中写到多级路由通过跟 ParentLayout 来实现

注意事项

整个项目所有路由 name 不能重复，包括 getParentLayout的参数

getParentLayout(name:string)的 name 必须与当前路由项的name保持一致

我的疑惑有以下几点：

1. 我看了一下getParentLayout函数,跟传入值name:string没有什么关系，都是返回PARENT_LAYOUT_NAME，为什么name 必须与

当前路由项的name保持一致，而且PARENT_LAYOUT_NAME是定义死的，也没有像LAYOUT一样有import具体页面（export const LAYOUT = () => import('/@/layouts/default/index.vue')）？

 export const getParentLayout = (_name?: string) => {
  return () =>
    new Promise((resolve) => {
      resolve({
        name: PARENT_LAYOUT_NAME,
      });
    });
};

2.在src\router\routes\modules\demo\permission.ts中删除所有带有getParentLayout函数的那一行，对代码没有影响，那么带有

getParentLayout函数的作用是什么？

const permission: AppRouteModule = {
  path: '/permission',
  name: 'Permission',
  component: LAYOUT,
  redirect: '/permission/front/page',
  meta: {
    icon: 'ion:key-outline',
    title: t('routes.demo.permission.permission'),
  },

  children: [
    {
      path: 'front',
      name: 'PermissionFrontDemo',
      component: getParentLayout('PermissionFrontDemo'),  // 删除
      meta: {
        title: t('routes.demo.permission.front'),
      },
      children: [
        {
          path: 'page',
          name: 'FrontPageAuth',
          component: () => import('/@/views/demo/permission/front/index.vue'),
          meta: {
            title: t('routes.demo.permission.frontPage'),
          },
        },
...

[zhouwencn]

你好，我想问一下它这个项目的路由是怎么导入进入的呀，我看了下app.use(router);里面的很多路由都没有，但是点击页面却能跳转到相应的路由，很好奇是怎么一个逻辑，能否帮忙指点一下

[ZiLongLing]

没有回答吗，我也好疑惑

[limbodan]

这是动态路由，本地mock模拟获取menus，获得路由，然后addrouter加载的路由

[66lizhenhua66]

框架把多级嵌套路由转成最多二级路由了，所以就算你写了3层路由，最终你第2层跟第3层都变成第2层路由（同层级路由）了，如果你路由里PermissionFrontDemo的component写上router-view，应该是不会生效的

[liuk123456789]

跟楼主有同样的疑惑，很不解这个getParentLayout 的作用，感觉唯一的作用就是保持唯一性，因为getParentLayout传入的基本都路由配置的name，希望有懂的大佬答疑解惑下