[英]Dynamic routing is not working in nuxt?
我希望拥有(创建)动态路由,如nuxt docs中提供的那样
pages/projects/
/_id.vue
/_id/details.vue
但每次我调用url localhost/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构建后打开.nuxt/router.js
。 在那里你会找到function createRouter()
,它将帮助你调试路由。
你必须配置Nuxt-Child。 看看https://nuxtjs.org/api/components-nuxt-child
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.