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

我希望有（创建）动态路由，如中提供的

---

但是每次我调用url

localhost/projects/1/details/

，它都是呈现

\u id.vue

页面，而不是

/\u id/details.vue

！！如何正确执行？

您必须配置Nuxt子项。查看一下

您的_id.vue结构应该包含

组件，以便正确呈现其子

详细信息.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"
            }
        ]
    },

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

└── 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"
            }
        ]
    },

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

└── 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"
            }
        ]
    },

\u id.vue

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

<script>
export default {}
</script>

<style>
</style>

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

<script>
export default {}
</script>

<style>
</style>

（_id.vue）项目：{{$route.params.id}
导出默认值{}

\u id/details.vue

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

<script>
export default {}
</script>

<style>
</style>

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

<script>
export default {}
</script>

<style>
</style>

（_id/details.vue）项目：{{$route.params.id}
导出默认值{}

提示：如果您不确定自己的路由，请在nuxt构建完成后打开

.nuxt/router.js

。您将在那里找到

函数createRouter（）

，它将帮助您调试路由