动态路由在 nuxt 中不起作用？

Question

我想要（创建）动态路线，如nuxt 文档中提供的那样

pages/projects/
              /_id.vue
              /_id/details.vue

但每次我调用 url 时localhost/projects/1/details/，它都是渲染_id.vue页面而不是/_id/details.vue！！怎样做才正确呢？

Answer 1

你的 _id.vue 结构应该包含<nuxt-child>组件以便渲染它的子组件details.vue正确渲染它的子组件。

\n\n

您的文件夹结构如下所示：

\n\n

\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 pages\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 projects\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _id\n        \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 details.vue\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _id.vue\n

\n\n

具有此文件夹结构会产生具有如下设置的路由器：

\n\n

routes: [\n    {\n        path: "/projects/:id?",\n        component: ProjectsId,\n        name: "projects-id",\n        children: [\n            {\n                path: "details",\n                component: ProjectsIdDetails,\n                name: "projects-id-details"\n            }\n        ]\n    },\n

\n\n

这意味着您的代码可能如下所示：

\n\n

_id.vue

\n\n

<template>\n  <div>\n    <h1>(_id.vue) Project: {{ $route.params.id }}</h1>\n    <nuxt-child/>\n  </div>\n</template>\n\n<script>\nexport default {}\n</script>\n\n<style>\n</style>\n

\n\n

_id/details.vue

\n\n

<template>\n  <div>\n    (_id/details.vue) Project: {{ $route.params.id }}\n  </div>\n</template>\n\n<script>\nexport default {}\n</script>\n\n<style>\n</style>\n

\n\n

提示：如果您遇到不确定路由的情况，请.nuxt/router.js在 nuxt 构建完成后打开您的路由。在那里你会发现function createRouter()它可以帮助你调试路由。

\n