Question

是否可以从父组件的子组件中排除 pages 目录中的某些嵌套组件？我需要在父组件 (nested-a) 内部呈现一些嵌套组件（nested-b 和 _id.vue），并且一些嵌套组件（独立嵌套）用作独立页面，这些组件不在 _id.vue 内部呈现{1}}，仅在路由中使用父级。

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

/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

感谢您的建议。

Answer 1

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

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

所有这些都可以通过 @nuxtjs/router-extras 包实现。
我希望它能以某种方式帮助你。当然，您可以修改它为独立显示器和非独立显示器设置特定的布局。
如果您想让 external-standalone.vue 处于同一级别，您当然也可以将 account 文件移动到 _id.vue 目录中。

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

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

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

1 个答案: