如何使用nuxt.js中的router.push自动路由到嵌套子项

问题描述

我正在使用 nuxt.js。这是我的文件目录：

-- pages
      -- aaa.vue
      -- aaa (directory)
         -- bbb.vue
what i see in the generated file: router.js in .nuxt (directory):
routes: [{
    path: "/aaa",component: _5d6eb9d6,name: "aaa",children: [{
      path: "bbb",component: _15576d9f,name: "aaa-bbb"
    }]
  }],

这是我想要做的：

从 localhost:3000/aaa ，我提交了一个表格。它呼吁休息 服务，然后自动转到“bbb”屏幕。

我尝试使用 this.$router.push({ name: "aaa-bbb" }) 但它仍然停留在 "aaa" 屏幕。 >

如果我重命名 aaa.vue（例如：到 111.vue）或“aaa”目录（例如：到“222”）。然后我可以路由到“bbb”屏幕。但我不喜欢这种方式。

请帮忙。

解决方法

您应该删除根目录的 aaa.vue，并在 index.vue 目录中将其重命名为 aaa。

,

在我看来，这不是要混合使用。如果您记录 nuxt 创建的路由，则您目录中的所有页面都将作为子对象附加到您的 'aaa.vue' 文件（属性“children”）中的路由。

// extract of console.log(routes)
{
 name: 'aaa',path: '/aaa',component: '/nuxt/pages/aaa.vue',chunkName: 'pages/aaa',children: [
   [Object],[Object],[Object]
 ]
}

如果你把 index.vue 放在你的目录中，nuxt 会为每个文件创建一个自己的条目。

可能实现您想要的唯一方法是在 nuxt.config.js 中手动扩展路由，请参阅 nuxt 文档中的 extendRoutes。