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

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&nbsp; to="/dashboard"&nbsp; class="m-menu__link"&nbsp; active-class="yourClass"></router-link><route-link>请注意，您可以将组件呈现为<li>元素，因此只需将 li 类添加到 router-link 组件编辑<li&nbsp; &nbsp;class="m-menu__item m-menu__item--active"&nbsp; &nbsp;aria-haspopup="true"&nbsp; &nbsp;id="dashboard"&nbsp; &nbsp;@click="toggleMenu('dashboard')"&nbsp; &nbsp;:class="{ 'my-active-class': isDashboardActive }"&nbsp;>&nbsp;<router-link to="/dashboard" class="m-menu__link">&nbsp; &nbsp; &nbsp;<i class="m-menu__link-icon flaticon-line-graph"></i>&nbsp; &nbsp; &nbsp; &nbsp; <span class="m-menu__link-title">&nbsp; &nbsp; &nbsp; &nbsp; <span class="m-menu__link-wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="m-menu__link-text">{{ $t("Dashboard") }}</span>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp;</router-link></li>在你的组件 JS 中，你有两个选择：data: () => ({&nbsp; isDashboardActive: false}),watch:{&nbsp; &nbsp; $route (to, from){&nbsp; &nbsp; &nbsp; &nbsp;console.log(to.path);&nbsp; &nbsp; &nbsp; &nbsp;this.isDashboardActive = true&nbsp; &nbsp; }},或这个computed: {&nbsp; // if you use computed, you can remove data and watch&nbsp; isDashboardActive () {&nbsp; &nbsp; return this.$route.path === '/dashboard'&nbsp; }},另一种保持相同 html 结构的选择，依赖于活动类：<router-link&nbsp; &nbsp;class="m-menu__item m-menu__item--active"&nbsp; &nbsp;aria-haspopup="true"&nbsp; &nbsp;id="dashboard"&nbsp; &nbsp;@click="toggleMenu('dashboard')"&nbsp; &nbsp;to="/dashboard"&nbsp; &nbsp;active-class="yourClass"&nbsp;>&nbsp;<a class="m-menu__link">&nbsp; &nbsp; &nbsp;<i class="m-menu__link-icon flaticon-line-graph"></i>&nbsp; &nbsp; &nbsp; &nbsp; <span class="m-menu__link-title">&nbsp; &nbsp; &nbsp; &nbsp; <span class="m-menu__link-wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="m-menu__link-text">{{ $t("Dashboard") }}</span>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp;</a></li>

Answer 2

我可以像下面那样做。<li&nbsp; &nbsp; class="m-menu__item"&nbsp; &nbsp; :class="checkIsPathAndRoutePathSame('/dashboard') ? 'm-menu__item--active' : ''"&nbsp; &nbsp; id="dashboard"&nbsp; &nbsp; @click="toggleMenu('dashboard')">&nbsp; <router-link to="/dashboard" class="m-menu__link">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </router-link></li>data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; currentRoute: ''&nbsp; &nbsp; };},watch:{&nbsp; &nbsp; &nbsp;$route (to, from){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.currentRoute = to.path;&nbsp; &nbsp; &nbsp; }},mounted() {&nbsp; &nbsp; this.currentRoute = this.$route.path;},methods: {&nbsp; &nbsp; checkIsPathAndRoutePathSame(path){&nbsp; &nbsp; &nbsp; &nbsp; if(this.currentRoute === path){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}}