[JavaScript知识库]VUE-Element组件（二）NavMenu导航菜单--层级关系

NavMenu第一篇的几个例子，固定的菜单中菜单层级是在<el-menu>只写死的，动态菜单权限中层级也是由后台代码排好的(父子关系)，到前端接收的menuList可以直接循环渲染了。现在后端只传回有权限的菜单编码，层级关系放在前端路由配置，然后根据路由与后端返回的菜单编码过滤用户权限。

一、多级路由：之前的路由均为二级路由（当然也可以写成多级路由），如果需要配置多级路由，嵌套多层children就可以了，其次要注意component。最外层component指向导航页即NavMenu菜单页面，其他的父级路由component指向一个空的路由跳转页面（否则会出现多个菜单）。如三级菜单：

children:[
{
  path: '/my/user',
  name: 'myUser',
  meta: {
    title: '用户',
    noControl: true,
    icon: 'el-icon-help',
  },
  component: MultiLevelMenu,
  children: [
    {
      path: '/my/user1',
      name: 'user1',
      meta: {
        title: '用户1页面',
        noControl: true,
        showAlways: true
      },
      component: MultiLevelMenu,
      children: [
        {
          path: '/my/user1/user11',
          name: 'overview',
          meta: {
            title: '用户11

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系

开通VIP 解锁文章