分享：nuxt动态路由

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

nuxt 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了如何在 Nuxt.js 中设置和管理动态路由，包括如何通过创建特定的 Vue 文件或目录来定义带参数的路由。还提到了Vue School的免费课程资源，以帮助进一步理解动态路由。动态路由的目录结构和路由配置表也被详细阐述，指出如何通过在`users/_id`目录下创建`index.vue`文件来使路由参数变为必选。

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

nuxt动态路由详解

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。
观看Vue School出品的动态路由免费课程————https://vueschool.io/lessons/nuxtjs-dynamic-routes?friend=nuxt
以下目录结构：

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

Nuxt.js 生成对应的路由配置表为：

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

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。：API Configuration generate
注意：generate 命令会忽略动态路由: API Configuration generate