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')
  • 下一级路由
主机列表                
主机验证
账号管理

好了,完结撒花

你可能感兴趣的:(vue 多级路由)