Nuxt 嵌套路由 nuxt-child 组件用法（父子页面组件的传值）

在 Nuxt.js 中，我们可以使用嵌套路由来构建复杂的页面结构。nuxt-child 组件是 Nuxt.js 提供的一个特殊组件，用于在父组件中渲染子组件。通过 nuxt-child 组件，我们可以实现父子页面之间的数据传递。

基本用法

首先，我们需要在 Nuxt.js 项目中创建一个父组件和一个子组件。假设我们有一个 pages 目录，其中包含 parent.vue 和 child.vue 两个文件。

parent.vue

<template>
  <div>
    <h1>父组件</h1>
    <router-view></router-view>
  </div>
</template>

在父组件中，我们使用 <router-view></router-view> 标签来渲染子组件。

child.vue

<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的数据：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.message = this.$route.params.message;
  }
}
</script>

在子组件中，我们使用 $route.params 来获取父组件传递过来的数据，并将其显示在页面上。

路由配置

接下来，我们需要在路由配置中定义父子页面的关系。假设我们的路由配置如下：

// nuxt.config.js

export default {
  // ...
  router: {
    routes: [
      {
        path: '/parent',
        component: '~/pages/parent.vue',
        children: [
          {
            path: 'child/:message',
            component: '~/pages/child.vue'
          }
        ]
      }
    ]
  }
}

在路由配置中，我们使用 children 字段来定义子路由。子路由的路径中包含了一个参数 :message，用于传递数据给子组件。

示例说明

示例 1

假设我们访问的 URL 是 /parent/child/Hello，那么父组件会渲染子组件，并将 Hello 作为参数传递给子组件。

父组件渲染结果：

父组件

子组件
接收到的数据：Hello

示例 2

假设我们访问的 URL 是 /parent/child/World，那么父组件会渲染子组件，并将 World 作为参数传递给子组件。

父组件渲染结果：

父组件

子组件
接收到的数据：World

通过以上示例，我们可以看到父子页面之间成功传递了数据，并在子组件中进行了显示。

希望这个攻略对你有所帮助！