Vue el-menuのハイライト設定とメニュー項目をクリックして、ルーティングジャンプを実現します

2021/11/13ナレッジポイントレコード

1つのelメニューメニュー項目のハイライト設定

el-menuの強調表示は次のように設定されます：default-active。通常、$route.pathまたは$route.nameの2つの値は基本的に一意であるため、これらをバインドします。強調表示の判断では、これは：default-activeでバインドされた値をメニュー項目の一意の識別子インデックスと比較することで強調表示され、同じ場合は強調表示されます。

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

    ]
  },

したがって、ハイライト設定を実現するには、2つのステップに分けることができます
。1。：default-active = ""を

設定して属性値をバインドします。2。メニュー項目のインデックス値、インデックス値、およびによってバインドされた値を設定します。 ：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: []
            },
          ]
        },
      ]

2.メニュー項目をクリックして、ルーティングジャンプを実現します

これは2つのステップに分かれています：
1。el-menuでルーティング属性を開きます。つまり、router =“ true”

2.対応するルーティングパスをメニュー項目にバインドします。
このステップは設定できません。設定しない場合：route、ルートが一致する場合ルーティングジャンプのアイテムのインデックス属性と一致します。
公式説明：
el-menuルーター属性

el-item属性ルート

個人分析：アイテムに：routeを設定しなくなった場合、ルートがジャンプすると、アイテムのインデックスバインディング値に従ってジャンプします。：routeが設定されている場合は、次のようになります。ルート値がジャンプします。つまり、ルートの優先度が高くなります。
設定は次の
とおりです。route<el-menu-item：index = "item.path"：route = "{path：item.path}" v-for = "item in menu.children">