vue 多级路由

我画的三级路由哈哈

router3.png

项目结构

jiehou.png

路由配置

 * 框架内页面
 */
const frameIn = [
  {
    path: '/',
    name: 'index',
    meta: {title:'首页'},
    component: require('@/pages/core/index').default,
    redirect: {name: 'login'},
    children: [
        {
          path: 'login',
          name: 'login',
          meta: {
            title: 'login'
          },
        component: () => import('@/pages/core/index/components/login'),
      },
       // EasyAsscount--主机列表
       {
         path: 'easyAccount/hostList',
         name: 'EasyAccount',
         meta: {
           title: 'EasyAsscount'
         },
         component: () =>import('@/pages/EasyAccount/hostList'),
           
         children: [{
          //  EasyAsscount--主机验证
              path: '/accountHostManagement',
              name: '/accountHostManagement',
              meta: {
                title: 'EasyAsscount'
              },
              component: () =>
              import ('@/pages/EasyAccount/accountHostManagement')
         }]
     ]
]

这个就是我的路由了，2层自路由嵌套，需要注意的是第二层路由的路径，无需加上其文件夹名字，我之前不成功，就是跟一级路由一样的写法，将其文件夹也带上了

路由引用

jsthis.$router.push('/easyAccount/hostList')

• 下一级路由

<el-menu-item index="/host">主机列表</el-menu-item>                
<el-menu-item index="/accountHostManagement">主机验证</el-menu-item>
<el-menu-item index="/accountManagement">账号管理</el-menu-item>

好了，完结撒花😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍