从子节点中排除嵌套组件(Nuxt路由)

Question

是否可以从父组件的子组件中排除页面目录中的某些嵌套组件？我需要一些嵌套组件(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

谢谢你的建议。

Answer 1

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

从您的情况来看，您希望使standalone.vue与父_id.vue分离。但你还是想和另一个孩子一样使用同一条路线。

实际上，您可以在nuxt.config.js中使用nuxt.config.js修改生成的路由。

记者:不过，没有必要有一种干净的方法去做。

在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

Answer 2

我不确定我是否完全得到了你想要达到的目标，但我做了两个按钮：

• 主页按钮:有条件地呈现standalone而不是选项卡，但仍将视图保留在其父视图中(路径以standalone-nested结尾)
• real外部按钮:完全无关的页面，但它仍然可以在您想要的路径上访问，现在它在external-standalone-nested上，但是您可以简单地更改它。为此，转到external-standalone.vue并在<router></router>部分中更改它。

多亏了@nuxtjs/router-extras包，所有这些都是可行的。

我希望它能对你有所帮助。当然，您可以修改它来为独立的和非独立的显示有一个特定的布局。

当然，您也可以将external-standalone.vue文件移动到account目录中，如果您希望将_id.vue放在相同的级别上。

我在码箱上托管了解决方案，我的提交(从您的分叉示例开始)可以在Github上找到。

编辑:我又背了一遍。删除无用的注释，并添加了一个动态分量示例，因为它是一个有趣的模式，可以帮助您通过其他方式绕过nuxt-child。

与我们的用例不完全相关，但值得一看。