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

最新推荐文章于 2025-06-25 09:08:47 发布

原创

最新推荐文章于 2025-06-25 09:08:47 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Nuxt.js中创建内嵌子路由，通过nuxt-child组件实现父子页面间的传值。首先，在pages目录下创建一个名为fanil的Vue文件和同名目录，然后分别编写父组件fanil.vue和子组件index.vue、child.vue、child2.vue。通过这种方式，可以实现动态路由和页面间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

链接：
nuxt文档
 相关文章

1.创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
这里在pages里新建一个fanil.vue、fanil文件夹
在这里插入图片描述

2.fanil.vue源码

<template>
  <div class="container">
    <p>Final Page</p>
    <ul>
      <li>
        <NuxtLink to="/">
          Go to /home
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/fanil">
          Go to /index
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/fanil/child">
          Go to /child
        </NuxtLink&g