router-link-active Nuxt 3 / VueJS 嵌套路由不适用于父级

【问题标题】：router-link-active Nuxt 3 / VueJS on nested routes not applying to parentrouter-link-active Nuxt 3 / VueJS 嵌套路由不适用于父级
【发布时间】：2022-12-10 06:19:42
【问题描述】：

我创建了一个简单的复制品来更好地解释我自己。我有：

-| pages/
---| test/
------| index.vue
------| nested.vue

我有一个导航栏，阅读了我假设的文档，如果我将 NuxtLink 链接到 /test 或 /test/nested.vue，那么我将在导航栏中将 router-link-active css 类应用于两者，但它似乎没有这样做。

文档似乎建议您将内容布置为：

-| pages/
---| parent/
------| child.vue
---| parent.vue

我试过了，但没有用——孩子永远不会被渲染（除非我在 parent.vue 中添加另一个<NuxtPage>，这不是我想要的，因为那会显示父母和孩子的内容。

转载在这里：https://stackblitz.com/edit/nuxt-app-config-t3nvjv?file=app.vue

帮助将不胜感激。

【问题讨论】：

标签： javascript vue.js nuxt.js vue-router nuxtjs3

【解决方案1】：

我遇到了完全相同的问题，终于明白了如何使用NuxtPage！

您必须遵循以下结构：

/pages
  /posts
    [postId].vue
    index.vue
  posts.vue

在你的/posts/index.vue：

<template>
  <h1>All posts page</h1>
  <p>Whatever...</p>
</template>

在你的/posts/[postId].vue：

<template>
  <h1>Single post page</h1>
  <p>{{ postId }}</p>
</template>

最后，在你的posts.vue：

<template>
  <NuxtPage />
</template>

您的index.vue 和[postId].vue 内容将单独呈现，并且您的NuxtLinks router-link-active 和router-link-exact-active 类将起作用:)

【讨论】：