hash 未包含在 vue router-link 中：active-class

Question

“我在尝试将特定类应用到处于活动状态的路由器链接组件时遇到了挑战，这意味着当用户位于确切路径上时，包括任何哈希或查询参数。

出现此问题是因为 Vue Router 的

active-class

和

exact-active-class

不考虑哈希或查询参数，如文档中所述：https://router.vuejs.org/guide/migration/#Removal-of-the -路由器链接中的精确属性-

一个潜在的解决方案是使用

exact

属性，但它在 Vue 3 中被删除。这里有一个类似的旧 question 的链接，其中提供了解决方案，尽管它有点过时了。我将解释我提出的解决方案，如果它符合您的需求，您可以使用它。”

Answer 1

您需要做的是访问

route.fullPath

并将其与所需值进行比较。就我而言，我将其与 ref 变量进行比较。

import { useRoute } from 'vue-router';

const route = useRoute();

<RouterLink
  :to="link.fullPath"
  class="transition-all hover:text-gray-500"
>
  <span
    :class="{
      'text-alternate': route.fullPath === link.fullPath,
    }"
  >
    {{ link.name }}
  </span>
</RouterLink>