Question

所以我的应用程序中有三个页面。在我的文件夹结构中，我有类似以下内容：

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

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

有什么办法可以做到这一点？谢谢。

Answer 1

这个想法是通过$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>

Answer 2

我能够通过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')
    })
  }
}

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

2 个答案: