使用子路由时如何退出 <nuxt-child>答案

【问题标题】：How to exit <nuxt-child> when using sub routes使用子路由时如何退出 <nuxt-child>
【发布时间】：2024-04-24 12:10:01
【问题描述】：

所以我的应用中有三个页面。在我的文件夹结构中，我有这样的东西：

/verify
---complete.vue
---business.vue
---personal.vue
verify.vue

所以基本上verify.vue 有一个<nuxt-child> 组件来处理我的business.vue 和personal.vue。我想要发生的是complete.vue，即使在/verify/complete 的父路由内，也会有不同的布局/页面模板。

有什么方法可以实现吗？谢谢。

【问题讨论】：

标签： vue.js vue-router nuxt.js

【解决方案1】：

我能够解决 nuxt.config.js 中的 extendRoutes 问题。这样做是在不使用文件夹结构的情况下添加自定义路由。所以当 /verify/complete 被命中时，它会解析组件。

router: {
  middleware: ['auth'],
  base: '/beta/',
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'verify-complete',
      path: '/account/verify/complete',
      component: resolve(__dirname, 'pages/account/verify-complete.vue')
    })
  }
}

【讨论】：

谢谢！这个对我有用。我对嵌套路由有同样的问题，需要在范围之外使用不同的布局。

【解决方案2】：

这个想法是通过$route.fullPath 跟踪当前路线，如果是/verify/complete，则适当更改布局。让我们考虑一下这个标记：

verify.vue:

<template>
  <section>
    <h1 v-if="$route.fullPath === '/verify/complete'">Complete</h1>
    <h1 v-else>Business or Personal</h1>
    <nuxt-child></nuxt-child>
  <section>
</template>

如果更改某些块更复杂，您应该定义不同的页面组件，并通过<component :is="COMPONENT_NAME">适当地加载它们：

verify.vue:

<template>
  <component :is="COMPONENT_NAME"></component>
</template>

【讨论】：

感谢您的回复，但这不是我想要实现的。我已经发布了我的答案。