Nuxt.js 中的路由

Nuxt.js 是一个基于 Vue.js 的应用框架，它预设了各种便于开发的配置项，开发者可以使用 Nuxt.js 快速地搭建一个基于 Vue.js 的应用。本文将介绍 Nuxt.js 中的路由。

路由的基本概念

路由（Routing）是指根据不同的 URL 地址展示不同的内容或页面的技术。在 Vue.js 中，我们通常使用 vue-router 库来实现路由功能。

在 Nuxt.js 中，它内置了 vue-router，可以更加方便地实现路由功能。Nuxt.js 的路由基于文件系统，即在 pages 目录下的文件表示一个路由。

基本用法

在 Nuxt.js 中，我们可以在 pages 目录下建立一个 Vue 单文件组件，来表示一个路由。例如，在 pages 目录下新建一个 about.vue 文件，表示 /about 路径：

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page</p>
  </div>
</template>

通过上述代码，我们创建了一个 About 页面。路由的路径就是文件名去掉 .vue 后缀，即 /about。

动态路由

有时候我们需要对路由进行参数传递，例如，我们需要通过 /users/1 的形式展示第一个用户的信息。在 Nuxt.js 中，实现动态路由也非常方便。

在 pages 目录下新建一个 _id.vue 文件，其中 _ 表示该路由参数为动态路由。例如，我们需要实现 /users/:id 路径可以展示不同用户的信息。

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
    <p>This is user {{ $route.params.id }}'s page</p>
  </div>
</template>

通过上述代码，我们成功获取到了路由的参数，并显示在页面上。

嵌套路由

在 Nuxt.js 中，还可以实现路由的嵌套。例如，我们需要实现一个 /users 路径，并在该路径下实现 /users/1、/users/2 等不同用户页面的展示。可以在 pages 目录下新建一个 users 目录，并在其中新建一个 index.vue 文件表示 /users 路径，再在该目录下新建一个 _id.vue 文件表示 /users/:id 路径。

<!-- pages/users/index.vue -->
<template>
  <div>
    <h1>Users</h1>
    <router-view></router-view>
  </div>
</template>

<!-- pages/users/_id.vue -->
<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
    <p>This is user {{ $route.params.id }}'s page</p>
  </div>
</template>

通过上述代码，我们成功实现了嵌套路由的功能。

总结

通过本文的介绍，我们了解了 Nuxt.js 中路由的基本用法、动态路由以及嵌套路由的实现方式。使用 Nuxt.js 内置的 vue-router，我们可以更加方便地实现路由功能。