Vue路由之多层级路由嵌套

直接进入主题, 在项目开发中难免会遇到多层级嵌套菜单, 可以通过实际html标签嵌套, 也可以通过路由管理, 这里推荐是使用路由的方式.

1. 首先看一下一二级嵌套路由, 包含基本的登录页、首页、默认页面

export const constantRoutes = [
  {
    path: '/redirect', // 路由重定向
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login', //登录页
    name: 'Login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home', // 一级默认路由
    children: [{
      path: 'home', // 二级路由
      name: 'Home',
      component: () => import('@/views/home/index'),
      meta: {
        title: '主页',
        icon: 'home',
        affix: true
      }
    }]
  }
]

这里默认登录后进入的页面是"/", 也就是指向路径"/home"的路由.

2. 再看一下层级路由嵌套

export const constantRoutes = [
  {
    path: '/redirect', // 路由重定向
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login', //登录页
    name: 'Login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home', // 一级默认路由
    children: [{
      path: 'home', // 二级路由
      name: 'Home',
      component: () => import('@/views/home/index'),
      meta: {
        title: '主页',
        icon: 'home',
        affix: true
      }
    }]
  },
  {
    path: '/cd1', // 二级路由
    name: '菜单1',
    component: Layout,
    hidden: false,
    meta: {
      title: '菜单1',
      breadcrumb: false
    },
    children: [{
      path: '/cd1/cd1-1', // 三级路由
      name: '菜单1-1',
      component: () => import('@/views/cd1/cd1-1'),
      hidden: false,
      meta: {
        title: '菜单1-1',
        breadcrumb: false
      },
      children: [{
        path: '/cd1/cd1-1/cd1-1-1', // 四级路由
        name: '菜单1-1-1',
        component: () => import('@/views/cd1/cd1-1/cd1-1-1'),
        hidden: false,
        meta: {
          title: '菜单1-1-1',
          breadcrumb: false
        },
        children: [
        ]
      }]
    },
    {
      path: 'cd1-2',
      name: '菜单1-2',
      component: () => import('@/views/cd1/cd1-1/cd1-1-1'),
      hidden: false,
      meta: {
        title: '菜单1-2',
        breadcrumb: false
      },
      children: [
      ]
    }]
  }
];

路由效果:

上述路由路径可以简化

一般不建议这样做, 全路径更加清晰一些.

 

嵌套框架(取自vue-element-admin):