nuxt.js服务端渲染中路由的学习

最新推荐文章于 2025-07-06 01:05:46 发布

原创

最新推荐文章于 2025-07-06 01:05:46 发布 · 656 阅读

1 ·

CC 4.0 BY-SA版权

Nuxt.js的路由不同于Vue，它基于目录结构自动生成，无需手动配置。当目录下有文件时，会自动生成对应的路由。例如，特定目录结构会产生相应的路由配置。在Nuxt.js中，./layout/default.vue充当了路由容器的角色，类似Vue的router-view。要了解更多详情，可以查阅Nuxt.js官方文档。

与传统的Vue项目不同的是，我们在使用Vue的时候需要配置Vue-Router信息，在Nuxt有很关键的一点就是约定优于配置。page目录下的所有*.vue文件会自动生成路由配置。

nuxt.js的路由和vue不一样，不需要你手动配置，它是根据依据 pages 目录结构自动生成 vue-router 模块的路由配置。

基础路由

假设 pages 的目录结构如下：

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

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}