Nuxt child：父路由工作不正确

Question

这是我的文件树：

pages/
-index.vue   (1)
-index/
--_id.vue    (2)

我希望：

• 如果路由是mydomain.com -> 仅渲染index.vue (1)
• 如果路由是mydomain.com/foo -> 在index.vue (1) 内渲染_id.vue (2)

当我没有子组件的参数时，我希望 Nuxt 子组件根本不渲染，但 Nuxt 使用 id 值 undefined 渲染它。 Vue 路由器做得正确。

这是类似 Nuxt 的 JSFiddle 行为：https://jsfiddle.net/maxmets/95ctse8d/（第 16 行 path: '/:id?'）

这是我想要的 JSFiddle（Vue 路由器）：https://jsfiddle.net/maxmets/rvmxg2f7/（第 16 行 path: '/:id'）

不同之处仅在于? 符号。当 Nuxt 自动创建路由对象时，它会添加 ? 如何让 Nuxt 路由器和 Vue 路由器一样正常工作？

Answer 1

你可以试试这个Nested Route 方法：

pages/
-index.vue   (1)
-index/
--_id.vue    (2)
--_index.vue    (3)

在index/index.vue，你可以只渲染空模板

<template>
  <div></div>
</template>

这可能不是最干净的方法，但应该可以完成工作。

或

但如果你选择定义自己的路由器，你可以查看Nuxt Router Extra Module