分享：nuxt嵌套路由

最新推荐文章于 2025-04-04 18:52:27 发布

万花丨凋

最新推荐文章于 2025-04-04 18:52:27 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： nuxt 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/awseda/article/details/106032258

nuxt 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了如何在 Nuxt.js 应用中使用 vue-router 创建嵌套路由。通过创建 Vue 文件并建立同名目录存放子视图组件，可以实现内嵌子路由。别忘了在父组件中添加<router-view>来展示子视图内容。

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

nuxt嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加用于显示子视图内容。
假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}