[英]Dynamic routing is not working in nuxt?
I want to have(created) dynamic route like as provided in nuxt docs 我希望拥有(创建)动态路由,如nuxt docs中提供的那样
pages/projects/
/_id.vue
/_id/details.vue
But everytime I call url localhost/projects/1/details/
, it is rendering _id.vue
page instead of /_id/details.vue
!! 但每次我调用url
localhost/projects/1/details/
,它都会呈现_id.vue
页面而不是/_id/details.vue
!! How to do correctly ? 怎么做正确?
Your _id.vue structure should contain <nuxt-child>
component in order to render it's child details.vue
correctly. 您的_id.vue结构应该包含
<nuxt-child>
组件,以便正确呈现它的子details.vue
。
Your folder structure then looks like this: 您的文件夹结构如下所示:
└── pages
└── projects
├── _id
│ └── details.vue
└── _id.vue
Having this folder structure produces router with setup like this: 有这个文件夹结构产生如下设置的路由器:
routes: [
{
path: "/projects/:id?",
component: ProjectsId,
name: "projects-id",
children: [
{
path: "details",
component: ProjectsIdDetails,
name: "projects-id-details"
}
]
},
That means your code could look something like this: 这意味着您的代码看起来像这样:
_id.vue _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 _id / details.vue
<template>
<div>
(_id/details.vue) Project: {{ $route.params.id }}
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
TIP: If you come to situation where you are not sure about your routing, open your .nuxt/router.js
after nuxt build is done. 提示:如果您遇到不确定路由的情况,请在完成nuxt构建后打开
.nuxt/router.js
。 There you will find function createRouter()
which will help you debug routes. 在那里你会找到
function createRouter()
,它将帮助你调试路由。
You have to config Nuxt-Child. 你必须配置Nuxt-Child。 Take a look https://nuxtjs.org/api/components-nuxt-child
看看https://nuxtjs.org/api/components-nuxt-child
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.