Vue Route 使用 router-link 判断当前是否激活 作者: Chuwen 时间: 2021-05-22 分类: Vue.js ### 参考链接： > https://segmentfault.com/q/1010000010436257 我尝试使用以下达到了我的目的 ```vue <router-link v-for="item in tabList" :to="{path: item.path}"> <span :class="{active: item.path === $route.path}">激活</span> <span :class="{no-active: item.path !== $route.path}">未激活</span> </router-link> ``` 当然官方也给出了文档，使用 `isExactActive`、`isActive` 可以判断，但是会出现一些问题： ```vue <router-link v-for="(item, index) in tableList" :key="item.index" :to="item.path" custom v-slot="{ href, navigate, isActive, isExactActive}"> <li class="Polaris-Tabs__TabContainer" :class="{'active': isActive}" role="presentation"> <!--isExactActive 相当于严格匹配模式--> <!--必须得使用 item.path === $route.path 匹配，使用 isExactActive、isActive 会有问题--> <!--下面的 data-isActive data-isExactActive 没有意义，只是作为调试日志查看--> <a :href="href" @click="navigate" :data-isActive="isActive" :data-isExactActive="isExactActive" :class="{'Polaris-Tabs__Tab':1, 'Polaris-Tabs__Tab--selected': item.path === $route.path}" role="tab" :tabindex="index"> <span class="Polaris-Tabs__Title">{{ item.title }}</span> </a> </li> </router-link> ``` 标签: Vue.js