NuxtJS 子动态页面未使用 nuxt-link 导航到/呈现答案

【问题标题】：NuxtJS child dynamic pages not being navigated to/rendering with nuxt-linkNuxtJS 子动态页面未使用 nuxt-link 导航到/呈现
【发布时间】：2020-05-07 22:29:54
【问题描述】：

如果我的文件结构是：

- pages
-- catrules.vue
-- catrules/
---- _id.vue

子页面不呈现（但 url 更新并且页面停留在父页面上）： <nuxt-link :to="'/catrules/' + catrule.slug">{{ catrule.ruleid }}</nuxt-link>

如果我将目录名称catrules 更改为catrule，那么一切都会按预期进行：

- pages
-- catrules.vue
-- catrule/
---- _id.vue

<nuxt-link :to="'/catrule/' + catrule.slug">{{ catrule.ruleid }}</nuxt-link>

【问题讨论】：

标签： nuxt.js nuxt-link

【解决方案1】：

你必须使用这个结构：

- pages
-- catrules/
---- _id.vue
---- index.vue

所以只需将您的 pages/catrules.vue 重命名为 pages/catrules/index.vue

见https://nuxtjs.org/guide/routing#nested-routes

【讨论】：