根据路由，动态高亮当前选择项

原创已于 2022-03-28 14:18:17 修改 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2022-03-28 14:15:59 首次发布

本文探讨了在前端开发中如何通过Vue路由的meta属性实现导航条目的自动高亮显示。通过对不同路径的匹配和meta.index的配置,可以有效地解决子路由激活状态的识别问题。

一开始判断path，发现子路由再输入url进入无法高亮

      判断当前的路径来设置活动标签activeNav
      changeActiveNav() {
        console.log(this.$route);
        switch (this.$route.path) {
          case '/w/kbap':
            this.activeNav = 1
            break;
          case '/w/zwgk':
            this.activeNav = 2
            break;
          case '/w/zxgg':
            this.activeNav = 3
            break;
          case '/w/fwrx':
            this.activeNav = 4
            break;
          case '/w/zxjy':
            this.activeNav = 5
            break;
          default:
            this.activeNav = 0;
        }
      }

使用路由的meta配置

        <ul class="navigation-ul">
          <li v-for="(item,index) in navList" class="navigation-li" :class="{activeNavigation:$route.meta.index==index||$route.matched[1].meta.index==index}"
            @click="toOtherNav(item,index)">{{item.title}}</li>
        </ul>

{
        path: 'kbap',
        component: kbapWeb,
        meta:{
          index:1
        }
      },
      {
        path: 'zwgk',
        component: zwgkWeb,
        meta:{
          index:2
        }
      },
      {
        path: 'zxgg',
        component: zxggWeb,
        meta:{
          index:3
        },