Vue el-menu highlight settings and click menu items to achieve routing jumps

2021/11/13 Knowledge point record

One, el-menu menu item highlight settings

el-menu highlighting is set by: default-active. Generally, we bind the two values ​​of $route.path or $route.name, because they are basically unique. For the judgment of highlighting, this It is to display whether it is highlighted by comparing the value bound by :default-active with the unique identifier index of the menu item, and if it is the same, it will be highlighted.

$route.path corresponds to the path of the current page route.
$route.name corresponds to the name of the current page route. They can be found in the index.js file in the router folder.
E.g:

 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')
      },

    ]
  },

Therefore, to achieve the highlight setting, it can be divided into two steps;
1. Set :default-active="" to bind an attribute value

2. Set the index value of the menu item, the index value and the value bound by :default-active should be is the same property value.

E.g:

<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 data in the code above

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: []
            },
          ]
        },
      ]

2. Click the menu item to realize routing jump

It is divided into two steps:
1. Open the routing attribute in el-menu; that is: router=“true”

2. Bind the corresponding routing path to the menu item.
This step can not be set. If you do not set :route, when the route matches It will match the index attribute of the item for routing jump .
Official explanation:
el-menu router attribute

el-item attribute route

personal analysis : if you no longer set :route in item, it will jump according to the item's index binding value when the route jumps. If :route is set, according to: The route value jumps, that is: the priority of the route is higher.
Here is the setting: route
< el-menu-item :index="item.path" :route="{path:item.path}" v-for="item in menu.children">