動態路由在nuxt中不起作用？

Question

我希望擁有（創建）動態路由，如nuxt docs中提供的那樣

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 。

您的文件夾結構如下所示：

└── 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() ，它將幫助你調試路由。

Answer 2

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