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

【问题标题】：Dynamic routing is not working in nuxt?动态路由在 nuxt 中不起作用？
【发布时间】：2018-11-08 19:36:07
【问题描述】：

我想拥有（创建）动态路由，如 nuxt docs 中提供的那样

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

但是每次我调用 url localhost/projects/1/details/ 时，它都会呈现 _id.vue 页面而不是 /_id/details.vue ！如何正确做？

【问题讨论】：

标签： javascript node.js nuxt.js

【解决方案1】：

您必须配置 Nuxt-Child。看看https://nuxtjs.org/api/components-nuxt-child

【讨论】：

【解决方案2】：

您的 _id.vue 结构应包含 <nuxt-child> 组件，以便正确呈现它的子 details.vue。

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

└── pages
    └── projects
        ├── _id
        │   └── details.vue
        └── _id.vue

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

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

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

_id.vue

<template>
  <div>
    <h1>(_id.vue) Project: {{ $route.params.id }}</h1>
    <nuxt-child/>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

_id/details.vue

<template>
  <div>
    (_id/details.vue) Project: {{ $route.params.id }}
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

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

【讨论】：