具有动态参数的 Nuxt 3 子路由未获得活动类

Question

我有以下文件夹结构。以下几页很重要

/workshops

和

/workshops/workshop-1

。

我现在遇到的问题是我的活动链接适用于

/workshops

，但不适用于子路线。

我知道我可以将

workshops.vue

文件添加到我的文件夹结构中，如此处所述 https://stackoverflow.com/a/74748684/1731057

那么有

<template>
    <NuxtPage />
</template>

但是，当前有一个页面

/workshops

正在被 [slug].vue 捕获，这是有意的。当我添加这个新的

workshops.vue

页面时，我的 [slug] 页面不再捕获此内容。

如何让活动链接正常工作，同时保留

/workshops

路径的 [slug].vue 路由？

这是我的文件夹结构

• 页数
  • 工作坊
    • [研讨会].vue
  • [slug].vue
  • workshops.vue <--- when adding this my [slug].vue doesn't catch /workshops anymore

Answer 1

<template>
<NuxtLink to="/about" :class="activePage === `infos` ? 'router-link-active' : ''">
 ABOUT
</NuxtLink>
</template>

<script setup>
const route = useRoute();
const activePage = computed(() => {
  if (route.path) return route.path.split('/')[1];
  return '';
});
</script>