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

Question

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

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

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

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

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

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

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

帮助将不胜感激。

Answer 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内容将单独呈现，并且您的NuxtLink的router-link-active和router-link-exact-active类将起作用:)