如何通过路由路径将类添加到导航项答案

【问题标题】：How to add class to navigation item by route path如何通过路由路径将类添加到导航项
【发布时间】：2020-08-05 09:32:45
【问题描述】：

我正在开发一个 vue.js 项目，在我的导航组件中，li 元素中有多个路由器链接，如下所示

<li
   class="m-menu__item m-menu__item--active"
   aria-haspopup="true"
   id="dashboard"
   @click="toggleMenu('dashboard')"
 >
 <router-link to="/dashboard" class="m-menu__link">
     <i class="m-menu__link-icon flaticon-line-graph"></i>
        <span class="m-menu__link-title">
        <span class="m-menu__link-wrap">
             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>
        </span>
        </span>
 </router-link>
</li>

我想要做的是通过路由器链接路径向 li 元素添加新类。使用手表属性我可以获得当前路线，其余的工作对我来说似乎很难。 watch 属性如下所示

watch:{
    $route (to, from){
       console.log(to.path);
       $('[to="'+path+'"]').parent().addClass('yourClass'); // i tried this way and it didn't work
      }
},

*请注意，我不能通过点击事件来做到这一点，因为我也可以使用仪表板浏览链接。请给我一个方法来做到这一点。谢谢。

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

如果你想为你的活动路由链接添加一个类，只需使用active-class 或exact-active-class 属性https://router.vuejs.org/api/#active-class：

<router-link
  to="/dashboard"
  class="m-menu__link"
  active-class="yourClass"
>
</router-link>

请注意，您可以将<route-link> 组件呈现为<li> 元素，因此只需将 li 类添加到 router-link 组件中

编辑

<li
   class="m-menu__item m-menu__item--active"
   aria-haspopup="true"
   id="dashboard"
   @click="toggleMenu('dashboard')"
   :class="{ 'my-active-class': isDashboardActive }"
 >
 <router-link to="/dashboard" class="m-menu__link">
     <i class="m-menu__link-icon flaticon-line-graph"></i>
        <span class="m-menu__link-title">
        <span class="m-menu__link-wrap">
             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>
        </span>
        </span>
 </router-link>
</li>

在你的组件 JS 中你有 2 个选项：

data: () => ({
  isDashboardActive: false
}),
watch:{
    $route (to, from){
       console.log(to.path);
       this.isDashboardActive = true
    }
},

或者这个

computed: {
  // if you use computed, you can remove data and watch
  isDashboardActive () {
    return this.$route.path === '/dashboard'
  }
},

另一种保持相同 html 结构的选项，依赖于 active-class：

<router-link
   class="m-menu__item m-menu__item--active"
   aria-haspopup="true"
   id="dashboard"
   @click="toggleMenu('dashboard')"
   to="/dashboard"
   active-class="yourClass"
 >
 <a class="m-menu__link">
     <i class="m-menu__link-icon flaticon-line-graph"></i>
        <span class="m-menu__link-title">
        <span class="m-menu__link-wrap">
             <span class="m-menu__link-text">{{ $t("Dashboard") }}</span>
        </span>
        </span>
 </a>
</li>

【讨论】：

感谢您的回答，但问题是我不允许更改 HTML 结构。
好的，我提出了其他几个选项
谢谢。我想我发现你很可能是第二个答案。

【解决方案2】：

我可以像下面那样做。

<li
    class="m-menu__item"
    :class="checkIsPathAndRoutePathSame('/dashboard') ? 'm-menu__item--active' : ''"
    id="dashboard"
    @click="toggleMenu('dashboard')"
>
  <router-link to="/dashboard" class="m-menu__link">
             
  </router-link>
</li>

data() {
    return {
        currentRoute: ''
    };
},
watch:{
     $route (to, from){
          this.currentRoute = to.path;
      }
},
mounted() {
    this.currentRoute = this.$route.path;},
methods: {
    checkIsPathAndRoutePathSame(path){
        if(this.currentRoute === path){
             return true;
        }
     }
}

【讨论】：