vue页面中子页面路由应该如何配置？

Question

当前页面下(用例管理)，点击添加用例跳转到新页面，但是我在路由中将这个添加用例页面写在用例管理的children里，用例管理会被认为是1级菜单，添加用例页面就变成了2级菜单。想请教正确的路由应该如何写？用的是elementui

这是路由

Answer 1

1.首先首页是根目录放在最外面
2.其次用例管理为子路由，放在children里。
3.用例管理的add功能为用例管理的，所以add应该放在useCase下面。例如path:'useCase/add'。
下面是举的例子（全部都是children里的）。

{
    path: 'sysconfig/roles',
    name: '/sysconfig/roles',
    meta: {
        title: '角色管理',
    },
    component: () =>
        import('@/views/roles/bydRoles'),
},
{
    path: 'sysconfig/roles/edit',
    name: '/sysconfig/rolesEdit',
    meta: {
        title: '编辑角色管理',
    },
    component: () =>
       import('@/views/roles/bydRolesEdit'),
},

Answer 2

放在用例管理平级，配置一个hidden:true不在导航这边显示就好了
`{
path: '/index/detail',
component: detail,
name:'detail',
hidden: true,
},`

Answer 3

用的是 vue-element-admin 么 没看明白你想要实现的效果是啥

Answer 4

{
        path: '/teaching',
        component: RouteView,
        redirect: '/form/welcome',
        // redirect: '/teaching/create-exercises/CreateExercises',
        meta: { title: '一级路由', icon: teachingIcon, permission: ['11'] },
        children: [
          {
            path: 'CreateExercises',
            name: 'CreateExercisesList',
            hideChildrenInMenu: true,
            component: () => import('@/views/teaching/CreateExercises/index'),
            meta: { title: '二级路由', keepAlive: false, permission: ['12'] },
            children: [
              {
                path: 'createLevel',
                name: 'CreateLevel',
                hideChildrenInMenu: true,
                component: () => import('@/views/teaching/CreateExercises/createLevel'),
                meta: { title: '三级路由', keepAlive: false, permission: ['12'] },
                children: [
                  {
                    path: 'levelList',
                    name: 'LevelList',
                    hideChildrenInMenu: true,
                    component: () => import('@/views/teaching/CreateExercises/levelList'),
                    meta: { title: '四级路由', keepAlive: false, permission: ['12'] }
                  }
                ]
              }
            ]
          }
}

因为是下级跳转 面包屑是根据路由动态生成的 所以下级不可以放在平级必须放在children里面 在每一个还有下级页面的temolate里面要添加<router-view />之后生成的路由大概是这个样子的 因为配置了hideChildrenInMenu: true,属性导航栏只渲染到二级 跳转三级是用的是路由嵌套 所以需要根据路由信息手动设置隐藏二级页面 三级跳四级的时候同样 二级页面代码如下

<template>
  <page-header-wrapper
    title=" ">
    <router-view />
    <a-card/>
二级页面内容
    </a-card>
  </page-header-wrapper>
</template>

created () {
    this.$route.name === 'CreateLevel' ? this.aCardVisbale = false
    : this.$route.name === 'LevelList' ? this.aCardVisbale = false
    : this.aCardVisbale = true
  }

watch: {
    $route: {
      handler: function (val) {
        this.$refs.table.refresh(true)
        val.name === 'CreateLevel' ? this.aCardVisbale = false
        : val.name === 'LevelList' ? this.aCardVisbale = false
        : this.aCardVisbale = true
      },
      deep: true
    }
  },