标签：el Vue name index menu 跳转 path icon

el-menu相关知识记录

• 一、el-menu菜单项高亮设置
• 二、点击菜单项实现路由跳转

2021/11/13 知识点记录

一、el-menu菜单项高亮设置

el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。

$ route.path对应当前页面路由的路径。
$ route.name对应当前页面路由的名称。他们在router文件夹下的index.js文件中都能查到。
例如：

 path: '/',
    name: 'Home',
    component: Home,
    redirect: '/index',
    children: [
      {
        path: '/index',
        name: 'Index',
        component: () => import('../views/Index')
      },
      {
        path: '/sys/user',
        name: 'User',
        component: () => import('../views/User')
      },
      {
        path: '/sys/role',
        name: 'Role',
        component: () => import('../views/Role')
      },
      {
        path: '/sys/menu',
        name: 'Menu',
        component: () => import('../views/Menu')
      },
      {
        path: '/sys/person',
        name: 'Menu',
        component: () => import('../views/Person')
      },

    ]
  },

所以要实现高亮设置，则可以分两步；
1、设置:default-active=""绑定某个属性值

2、设置菜单项的index值，index值和:default-active绑定的值应是同一个属性值。

例如：

<el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="$route.path"
      :router="true"
  >
  el-submenu :index="menu.path" v-for="menu in menuList">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.title}}</span>
        </template>
          <el-menu-item :index="item.path" :route="{path:item.path}" v-for="item in menu.children">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
          </el-menu-item>
      </el-submenu>

上面代码中的menuList数据

menuList: [
        {
          name: 'SysManga',//对应index
          title: '系统管理',
          icon: 'el-icon-s-operation',
          path: '',//router-link跳转路由
          children:  [
            {
              name: 'SysUser',
              title: '用户管理',
              icon: 'el-icon-s-custom',
              path: '/sys/user',
              children: []
            },
            {
              name: 'SysRole',
              title: '角色管理',
              icon: 'el-icon-s-custom',
              path: '/sys/role',
              children: []
            },
            {
              name: 'SysMenu',
              title: '菜单管理',
              icon: 'el-icon-s-custom',
              path: '/sys/menu',
              children: []
            },

          ]
        },
        {
          name: 'SysTools',
          title: '系统工具',
          icon: 'el-icon-s-tools',
          path: '',
          children: [
            {
              name: 'SysDict',
              title: '数字字典',
              icon: 'el-icon-s-order',
              path: '/sys/dicts',
              children: []
            },
          ]
        },
      ]

二、点击菜单项实现路由跳转

分两步：
1、在el-menu中开启路由属性；即:router=“true”

2、给菜单项绑定对应的路由路径
< el-menu-item :index=“item.path” :route="{path:item.path}" v-for=“item in menu.children”>

标签：el,Vue,name,index,menu,跳转,path,icon
来源： https://blog.csdn.net/weixin_43424325/article/details/121306543

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。