javascript - 动态路由在 nuxt 中不起作用?
问题描述
我想拥有(创建)动态路由,如nuxt 文档中提供的那样
pages/projects/
/_id.vue
/_id/details.vue
但是每次我调用 urllocalhost/projects/1/details/
时,它都是在渲染_id.vue
页面而不是/_id/details.vue
!! 如何正确做?
解决方案
您的 _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/router.js
在 nuxt 构建完成后打开。在那里你会发现function createRouter()
哪些可以帮助你调试路由。