时间戳

首页 > 解决方案 > Nuxt.js 中的简单嵌套动态路由

vue.js - Nuxt.js 中的简单嵌套动态路由

问题描述

我想使用模态作为嵌套路由来为每个对象执行任务。例如，'/objects/2'路由中有一个<nuxt-child/>组件，用于在带有路由路径的模式中添加注释'/objects/2/add-comment'。

我有下面的目录结构，但这不会创建嵌套路由。我究竟做错了什么？

pages/
--| objects/
----| _id/
------| index.vue
------| add-comment.vue
----| index.vue

生成的 routes.js 是平坦的：

routes: [{
    path: "/objects/:id?",
    component: _45173a6a,
    name: "objects-id"
  }, {
    path: "/objects/:id?/add-comment",
    component: _14a12353,
    name: "object-id-add-comment"
  }, {
...

标签： vue.jsnuxt.js

解决方案

这是我需要的目录结构：

pages/
--| objects/
----| _id/
------| add-comment.vue
----| _id.vue

这导致嵌套路由配置：

routes: [{
    path: "/objects/:id?",
    component: _45173a6a,
    name: "objects-id"
    children: [{
        path: "add-comment",
        component: _14a12353,
        name: "object-id-add-comment"
    }],
},
...

推荐阅读