如何在 nuxt.js 中使用 router.push 自动路由到嵌套子级答案

【问题标题】：How to automatically route to nested child using router.push in nuxt.js如何在 nuxt.js 中使用 router.push 自动路由到嵌套子级
【发布时间】：2021-02-19 05:01:47
【问题描述】：

我正在使用 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" 屏幕。 p>

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

请帮忙。

【问题讨论】：

标签： nested nuxt.js router children

【解决方案1】：

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

【讨论】：

谢谢。那是一种选择。但是当我们不重命名任何东西时，我很想看到解决方案。

【解决方案2】：

在我看来，这不是混合的。如果您记录 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],
   [Object],
   [Object]
 ]
}

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

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

【讨论】：