如何在元素中定位 router-link-active 类？

Question

我有一个带有 2 个路由器链路的组件。我希望在单击其中一个时两者都着色。问题是这些路由器链接不共享 router-link-active 类，因此我尝试通过 querySelector 定位它们并应用 color< /code> 手动 css 属性。

这是组件：

<template>
  <div id="nav-link-cms" class="nav-link-cms">
    <li>
      <router-link class="router-link" :to="{ name: link}">
      <span>
        <fa class="icon" :icon="icon"></fa>
        <span class="label">{{ label }}</span>
        <router-link class="plus-link" v-if="plusLink" :to="{ name: plusLink }">
          <fa class="icon-plus" :icon="[ 'fas', 'circle-plus' ]"></fa>
        </router-link>
      </span>
      </router-link>
    </li>
  </div>
</template>

我可以像这样定位一个 router-link 类 plus-link ：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    console.log(document.querySelector('.plus-link'))
})
</script>

这似乎工作正常。浏览器控制台输出：

如您所见，link 元素中同时存在 router-link-active 和 plus-link 类。

像这样输出 classList：

onMounted(() => {
    console.log(document.querySelector('.plus-link').classList)
})

在控制台中显示：

DOMTokenList ['plus-link', value: 'plus-link']
0: "router-link-active"
1: "router-link-exact-active"
2: "plus-link"
length: 3
value: "router-link-active router-link-exact-active plus-link"
[[Prototype]]: DOMTokenList

但是当我尝试查看列表是否包含 a router-link-active 类：

onMounted(() => {
    console.log(document.querySelector('.plus-link').classList.contains('router-link-active'))
})

控制台显示：

false

即使在 onMounted 之后，是否仍应用 router-link-active？我怎样才能瞄准它？

Answer 1

我自己没有尝试过，但你应该能够使用 useLink Docs，从Vue-Router中获取每个路由的if值（link和plusLink），然后查看其isActive属性然后他们俩都将其传递给 模板。

伪代码：

<template>
 <router-link :class="{active: isActive}" :to="link">
  <router-link :to="plusLink"></router-link>
 </router-link>
</template>

<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref, watch } from "vue";
import { useLink } from "vue-router";

const isActive = ref(false);
const linkState = useLink({ to: "about" });
const linkPlusState = useLink({ to: "new" });
watch([linkState.isActive + linkPlusState.isActive], () => {
  if (linkState.isActive || linkPlusState.isActive) {
    isActive.value = true;
  } else {
    isActive.value = false;
  }
});
</script>

注意：一般来说，在使用任何 FE 框架时，您应该避免直接 DOM 操作。