Vue el-menu resalte la configuración y haga clic en los elementos del menú para lograr saltos de enrutamiento

2021/11/13 Récord de puntos de conocimiento

Uno, configuración de resaltado de elemento de menú el-menú

el resaltado del menú está configurado por: predeterminado-activo. Generalmente, vinculamos los dos valores de $ ruta.ruta o $ ruta. nombre, porque son básicamente únicos. Para el juicio de resaltado, esto es para mostrar si se resalta comparando el valor vinculado por :default-active con el índice de identificador único del elemento del menú y, si es el mismo, se resaltará.

$route.path corresponde a la ruta de la ruta de la página actual.
$route.name corresponde al nombre de la ruta de la página actual. Se pueden encontrar en el archivo index.js en la carpeta del enrutador.
P.ej:

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

    ]
  },

Por lo tanto, para lograr la configuración de resaltado, se puede dividir en dos pasos:
1. Establecer :default-active="" para vincular un valor de atributo

2. Establecer el valor de índice del elemento del menú, el valor de índice y el valor vinculado por :default-active debe ser el mismo valor de propiedad.

P.ej:

<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>

menuLista de datos en el código de arriba

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. Haga clic en el elemento del menú para realizar el salto de enrutamiento

Se divide en dos pasos:
1. Abra el atributo de enrutamiento en el menú, es decir: enrutador = "verdadero"

2. Vincule la ruta de enrutamiento correspondiente al elemento del menú.
Este paso no se puede configurar. Si no configura : ruta, cuando la ruta coincida, coincidirá con el atributo de índice del elemento para el salto de ruta .
Explicación oficial:
el-menu router atributo

el-item atributo ruta

análisis personal : si ya no configura :route en el elemento, saltará de acuerdo con el valor de vinculación del índice del elemento cuando la ruta salta.Si :route está configurado, de acuerdo con: El valor de la ruta salta, es decir: la prioridad de la ruta es mayor.
Aquí está la configuración: route
< el-menu-item :index="item.path" :route="{path:item.path}" v-for="item in menu.children">