Как добавить класс к элементу навигации по пути маршрута

Question

Я работаю над проектом 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 по пути router-link. используя свойство watch, я мог получить текущий маршрут, а остальная работа мне кажется сложной. Watch свойство, как показано ниже

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

* Обратите внимание, что я не могу сделать это по событию щелчка, потому что я могу перемещаться по ссылкам с помощью панели инструментов. пожалуйста, дайте мне способ сделать это. Спасибо.

Answer 1

я мог бы сделать это, как показано ниже.

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

Answer 2

Если вы хотите добавить класс к своей активной ссылке маршрута, просто используйте свойство 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

Edit

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

И в вас component 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>