Nuxt.js 路由

什么是路由？

路由系统是用于浏览器中显示不同页面或视图的系统。通过不同的路由，可以显示不同的内容，这样用户就可以轻松地访问他们需要的信息。

在 Nuxt.js 中，路由是用来管理页面及其组件的。通过路由配置，我们可以定义不同的 URL，当用户访问这些 URL 时，Nuxt.js 将根据配置自动渲染对应的页面。

Nuxt.js 路由的主要特性

• 可以自动在客户端和服务端之间切换。在客户端和服务端之间切换通常需要进行大量的手动配置，但 Nuxt.js 可以帮助我们自动处理这些过程。
• 可以自动生成基于文件系统的路由。这意味着我们可以将路由与文件系统结合使用，从而非常方便地创建和管理路由。
• 支持动态路由。动态路由是指可以使用变量来定义路由，这样我们可以创建具有相似结构但不同内容的页面。
• 支持嵌套路由。可以将页面嵌套在其他页面中，这样可以非常方便地创建共享组件和布局。

如何设置 Nuxt.js 路由

要设置 Nuxt.js 路由，我们需要在根目录中的 nuxt.config.js 文件中添加一些配置。在配置中，我们可以定义我们的路由及其对应的页面组件，以及其他相关的选项。

# Example

module.exports = {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

如何定义路由

在 Nuxt.js 中，我们可以用两种方式来定义路由：

• 基于文件系统的路由
• 基于配置的路由

基于文件系统的路由

基于文件系统的路由是指将路由与文件系统结合使用，从而非常方便地创建和管理路由。

在 Nuxt.js 中，我们可以在 pages 目录中创建 Vue 文件，文件名就是路由路径。例如，我们可以在 pages 目录下创建一个 about.vue 文件，这样就可以自动创建一个 URL 为 /about 的路由。

pages/
--| index.vue
--| about.vue

基于配置的路由

在 Nuxt.js 中，我们也可以使用基于配置的路由来定义路由。在 nuxt.config.js 配置文件中，添加以下配置：

module.exports = {
  router: {
    routes: [
      {
        name: 'home',
        path: '/',
        component: '@/pages/index.vue'
      },
      {
        name: 'about',
        path: '/about',
        component: '@/pages/about.vue'
      }
    ]
  }
}

如何使用 Nuxt.js 路由

在 Nuxt.js 中，我们可以使用以下方式来使用路由：

1. 使用<nuxt-link> 组件

<nuxt-link> 组件是 Nuxt.js 提供的一个组件，用于创建链接到应用程序路由的标准链接。我们可以在任何地方使用它，例如导航栏或其他组件。

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

2. 使用 $router 对象

在 Nuxt.js 中，$router 对象是一个用于管理路由的实例。我们可以使用 $router 对象来处理一些高级路由操作，例如通过代码重定向用户到某个路由。

methods: {
  handleClick() {
    this.$router.push('/about')
  }
}

3. 使用 Nuxt.js 提供的辅助函数

除了使用 $router 对象之外，我们还可以使用 Nuxt.js 提供的一些辅助函数来处理路由。例如，我们可以使用 route 对象来获取当前路由信息。

computed: {
  isAboutPage() {
    return this.$route.path === '/about'
  }
}

结论

到此为止，我们对 Nuxt.js 路由的基本知识有了初步的了解。要深入了解 Nuxt.js 路由系统的更多特性及其配置，建议查阅 Nuxt.js 官方文档。