Nuxt3中NuxtLink父链接在子路由下不激活router-link-active类问题

1. 使用NuxtLink时，当前路径为/course/123时，指向/course的链接不会被添加router-link-active类。

我的pages目录结构如下：

- pages
  - index.vue
  - course/
    - index.vue
    - [id].vue

app.vue代码如下：

<template>
  <div>
    <NuxtLink to="/" class="link">Home</NuxtLink>
    <NuxtLink to="/course" class="link">Course</NuxtLink>
    <NuxtLink to="/course/123" class="link" exact>Course 123</NuxtLink>
    <NuxtPage />
  </div>
</template>

<style>
.link {
  margin: 8px;
  padding: 12px;
}
.link.router-link-active {
  border: 1px solid red;
}
</style>

2. 尝试通过监听route.path手动控制激活状态，但点击链接时状态不会立即更新，需点击两次才变化。

对应的代码：

<script setup>
const route = useRoute();
const activeRoute = ref(route.path);

watch(
  () => route.path,
  (route) => { activeRoute.value = route })

const activePath = (path: string) => {
  return activeRoute.value.includes(path);
}
</script>

<template>
    <NuxtLink to="/" class="link">Home</NuxtLink>
      <NuxtLink
        to="/course"
        :class="{ 'router-link-active': activePath('/course') }"
        class="link"
        >Course</NuxtLink
      >
      <NuxtLink to="/course/123" class="link" exact>Course 123</NuxtLink>
</template>

核心是调整pages目录结构，并新增一个路由容器文件：

原目录结构：

- pages
  - index.vue
  - course/
    - index.vue
    - [id].vue

调整后目录结构：

- pages
  - index.vue
  - course/
    - index.vue
    - [id].vue
  - course.vue

新增的course.vue内容仅作为路由容器：

<template>
    <NuxtPage />
</template>

内容的提问来源于stack exchange，提问作者bridge it bridge it