Nuxt.js 如何进行页面路由？

推荐答案

在 Nuxt.js 中，页面路由是通过文件系统自动生成的。你只需在 pages 目录下创建 .vue 文件，Nuxt.js 会根据文件结构自动生成对应的路由配置。

例如，如果你有以下文件结构：

pages/
├── index.vue
├── about.vue
└── users/
    ├── index.vue
    └── _id.vue

Nuxt.js 会自动生成以下路由配置：

// www.javascriptcn.com code example
{
  routes: [
    {
      path: '/',
      component: 'pages/index.vue'
    },
    {
      path: '/about',
      component: 'pages/about.vue'
    },
    {
      path: '/users',
      component: 'pages/users/index.vue'
    },
    {
      path: '/users/:id',
      component: 'pages/users/_id.vue'
    }
  ]
}

本题详细解读

1. 文件系统路由

Nuxt.js 使用文件系统来定义路由。pages 目录下的每个 .vue 文件都会自动生成一个路由。文件路径决定了路由的路径。

• 静态路由：例如 pages/about.vue 会生成 /about 路由。
• 动态路由：例如 pages/users/_id.vue 会生成 /users/:id 路由，其中 :id 是一个动态参数。

2. 嵌套路由

如果你需要在某个路由下嵌套子路由，可以在 pages 目录下创建一个与父路由同名的目录，并在其中创建子路由文件。

例如，pages/users/index.vue 是 /users 路由的默认页面，而 pages/users/_id.vue 是 /users/:id 路由的页面。

3. 自定义路由配置

虽然 Nuxt.js 会自动生成路由，但你也可以通过 nuxt.config.js 文件中的 router 配置来自定义路由行为。

// www.javascriptcn.com code example
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/custom.vue')
      });
    }
  }
}

4. 路由参数

在动态路由中，你可以通过 this.$route.params 来访问路由参数。例如，在 pages/users/_id.vue 中，你可以通过 this.$route.params.id 来获取 :id 参数的值。

5. 路由导航

Nuxt.js 提供了 <nuxt-link> 组件来进行路由导航。你可以像使用 <a> 标签一样使用它，但它会在不刷新页面的情况下进行路由跳转。

<nuxt-link to="/about">About</nuxt-link>

6. 路由中间件

你可以在页面组件中使用 middleware 属性来定义路由中间件。中间件会在页面加载之前执行，通常用于权限验证或数据预取。

export default {
  middleware: 'auth'
}

7. 路由守卫

Nuxt.js 支持全局路由守卫和局部路由守卫。你可以在 nuxt.config.js 中配置全局守卫，或在页面组件中使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子来定义局部守卫。

export default {
  router: {
    middleware: 'auth'
  }
}

通过这些机制，Nuxt.js 提供了强大且灵活的路由管理功能，使得开发者可以轻松地构建复杂的单页应用。