element ui 菜单栏父路由未添加到子路由问题

 vue 路由我们一般会如下设置，我们期望最终形成的是/news/list之类的路由。

{
    path: '/news',
    component: HomeTemplate,
    meta: { title: '资讯管理', icon: 'record' },
    children: [
      {
        path: 'list',
        name: 'newsList',
        component: () => import('@/views/news/list.vue'),
        meta: { title: '文章列表', icon: 'record' },
      },
      {
        path: 'save/:id?',
        name: 'newsSave',
        component: () => import('@/views/news/save.vue'),
        meta: { title: '资讯发布' },
        hidden: true,
      },
    ],
  },

在element ui中，我们可能会如下设置

<el-menu-item
     :key="child.path"
     :index="child.path"
>
      {{ child.meta.title }}
</el-menu-item>

但你会发现这种设置方法回产生404，并不能达到我们预期的效果。经分析，我们需要手动地拼接路由，如下:index="child.path" 改成 index="`${item.path}/${child.path}`"

<el-menu-item
     :key="child.path"
     :index="`${item.path}/${child.path}`"
>
      {{ child.meta.title }}
</el-menu-item>

当然，这样直接拼接，由于用户输入的不可控，可能很多时候拼接出来的路由有问题，导致无法跳转，可以自定义一个方法，对路由进行拼接，控制拼接规则

// 定义菜单路由拼接规则
 join(base, url) {
   let rootUrl = base;
   rootUrl = rootUrl.endsWith('/') ? rootUrl : `${rootUrl}/`;
   if (url.startsWith('/')) {
       return url;
   } if (url.startsWith('./')) {
       return rootUrl + url.substring(2);
   }
   return rootUrl + url;
}