从子级中排除嵌套组件（Nuxt 路由）答案

【问题标题】：Exclude nested component from children (Nuxt routing)从子级中排除嵌套组件（Nuxt 路由）
【发布时间】：2021-01-11 17:27:26
【问题描述】：

可以从父组件的子组件中排除 pages 目录中的一些嵌套组件吗？我需要一些嵌套组件（nested-a 和 nested-b）在父组件（_id.vue）内部渲染，一些嵌套组件（独立嵌套）用作独立页面，不在_id.vue 内部渲染，仅使用父组件在路线中。

所以我的目标是实现这些路线：

/account/{id} - 主页
/account/{id}/standalone-nested - 独立页面，不在父页面内呈现
/account/{id}/nested-a 和 /account/{id}/nested-b - 嵌套组件呈现在父级中

这是我的目录树：

pages
├── account
│   ├── _id
│   │   ├── nested-a.vue
│   │   ├── nested-b.vue
│   │   └── standalone.vue
│   ├── _id.vue
│   └── index.vue
└── index.vue

生成以下路由器：

{
    path: "/en/account/:id",
    component: _45553d28,
    name: "account-id___en",
    children: [{
      path: "nested-a",
      component: _7b67c342,
      name: "account-id-nested-a___en"
    }, {
      path: "nested-b",
      component: _7b75dac3,
      name: "account-id-nested-b___en"
    }, {
      path: "standalone",
      component: _6884b488,
      name: "account-id-standalone___en"
    }]
  }

在我的父组件_id.vue 中，我使用<NuxtChild /> 来确保在此组件内呈现嵌套组件，但我不知道如何告诉nuxt 哪些嵌套组件仅在此标记内呈现。

这是我的 MWE：https://github.com/DenisStephanov92/nuxt-routing-sample

感谢您的建议。

【问题讨论】：

可以分享MWE
@Chandan 嗨，谢谢你的努力，我在 github 上添加了 MWE 的链接
@DenisStephanov 不应该把这个_id.vue 放在名为_id 的文件夹中id.vue！！
@HardikShah 没有这会导致从路由器中删除所有子节点

标签： javascript vuejs2 nuxt.js vue-router

【解决方案1】：

我遇到了和你一样的问题，虽然可能为时已晚。但如果有人遇到类似问题，我会留下这个答案。

根据您的情况，您想让standalone.vue 与父_id.vue 分开。但是您仍想使用与其他孩子相同的子路由。

您实际上可以在nuxt.config.js 中使用extendRoutes 来修改生成的路由。
P.S：不过，这不是必须的干净的方法。

在nuxt.config.js中，您可以将extendRoutes添加到router，并使用unshift和filter对其进行修改。就这样

router: {
  extendRoutes(routes, resolve) {
    routes.find(el => el.name === 'account-id___en')
      .children
      .filter(el => el.name !== 'account-id-standalone___en');
    routes.unshift({
      path: "/en/account/:id/standalone",
      component: resolve(__dirname, 'pages/account/_id/standalone.vue'),
      name: "account-id-standalone___en"
    });
  },
},

结果：

[
  {
    path: "/en/account/:id/standalone",
    component: _6884b488,
    name: "account-id-standalone___en"
  },
  {
    path: "/en/account/:id",
    component: _45553d28,
    name: "account-id___en",
    children: [
      {
        path: "nested-a",
        component: _7b67c342,
        name: "account-id-nested-a___en"
      },
      {
        path: "nested-b",
        component: _7b75dac3,
        name: "account-id-nested-b___en"
      },
    ],
  },
]

参考：https://nuxtjs.org/docs/configuration-glossary/configuration-router/#extendroutes

【讨论】：

【解决方案2】：

不确定我是否完全得到您想要实现的目标，但我做了 2 个按钮：

主页按钮：有条件地渲染standalone而不是选项卡，但仍将视图保留在其父级中（路径以standalone-nested结尾）
真正的外部按钮：完全不相关的页面，但仍然可以通过您希望的路径访问，现在它位于external-standalone-nested，但您可以简单地更改它。为此，请转到 external-standalone.vue 并在 <router></router> 部分进行更改。

感谢@nuxtjs/router-extras 包，所有这些都是可行的。
我希望它能以某种方式帮助你。当然，您可以对其进行修改，使其具有独立与非独立显示器的特定布局。
当然你也可以将external-standalone.vue 文件移动到account 目录中，如果你想让_id.vue 处于同一级别。

我在Codesandbox 上托管了解决方案，我的提交（从您的分叉样本开始）可以在Github 上找到。

编辑：我再次承诺。删除了无用的 cmets 并添加了一个 dynamic component 示例，因为它是一个有趣的模式，可以帮助您绕过 nuxt-child 其他东西。
与我们的用例不完全相关，但值得一看 IMO。

【讨论】：