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

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 元素添加新类。使用手表属性我可以获得当前路线，其余工作对我来说似乎很难。手表属性如下watch:{    $route (to, from){       console.log(to.path);       $('[to="'+path+'"]').parent().addClass('yourClass'); // i tried this way and it didn't work      }},*请注意，我不能通过点击事件来完成，因为我也可以使用仪表板浏览链接。请给我一个方法来做到这一点。谢谢你。

Answer 1

如果你想将一个类添加到你的活动路由链接，只需使用active-classorexact-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 中，你有两个选择：

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 结构的选择，依赖于活动类：

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

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

        }

     }

}