分享：nuxt嵌套路由

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

原创最新推荐文章于 2025-04-04 18:52:27 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

nuxt 专栏收录该内容

45 篇文章

订阅专栏

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

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'
        }
      ]
    }
  ]
}