Nuxt.js 如何配置 router？

推荐答案

在 Nuxt.js 中，路由的配置是自动生成的，基于 pages 目录的结构。你不需要手动配置路由文件，Nuxt.js 会根据 pages 目录中的文件结构自动生成路由配置。

如果你需要自定义路由配置，可以在 nuxt.config.js 文件中通过 router 属性进行配置。例如：

-- -------------------- ---- -------
------ ------- -
  ------- -
    -------------------- -------- -
      -------------
        ----- ---------
        ----- ----------
        ---------- ------------------ -------------------
      ---
    -
  -
-

本题详细解读

1. 自动生成路由

Nuxt.js 会根据 pages 目录中的文件结构自动生成路由配置。例如，如果你有以下文件结构：

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

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

• / -> pages/index.vue
• /about -> pages/about.vue
• /users -> pages/users/index.vue
• /users/:id -> pages/users/_id.vue

2. 自定义路由配置

如果你需要自定义路由配置，可以在 nuxt.config.js 文件中通过 router 属性进行配置。router 属性支持多种配置选项，例如 extendRoutes、middleware、base 等。

2.1 extendRoutes

extendRoutes 方法允许你扩展或修改自动生成的路由配置。你可以通过 routes.push 添加新的路由，或者修改现有的路由。

-- -------------------- ---- -------
------ ------- -
  ------- -
    -------------------- -------- -
      -------------
        ----- ---------
        ----- ----------
        ---------- ------------------ -------------------
      ---
    -
  -
-

2.2 middleware

你可以在路由配置中添加中间件，用于在页面加载前执行某些逻辑。

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

2.3 base

base 选项用于设置应用的基路径。例如，如果你的应用部署在 /app/ 路径下，可以这样配置：

export default {
  router: {
    base: '/app/'
  }
}

3. 动态路由

Nuxt.js 支持动态路由，通过在文件名或目录名前加下划线 _ 来定义动态路由。例如，pages/users/_id.vue 会生成 /users/:id 的路由。

4. 嵌套路由

Nuxt.js 支持嵌套路由，通过在目录中创建与父组件同名的 Vue 文件来实现。例如：

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

在这个例子中，users/index.vue 是父路由，users/_id.vue 是子路由。

5. 路由参数验证

你可以在页面组件中使用 validate 方法来验证路由参数：

export default {
  validate({ params }) {
    return /^\d+$/.test(params.id);
  }
}

如果 validate 方法返回 false，Nuxt.js 会自动返回 404 页面。

6. 路由过渡效果

Nuxt.js 支持页面过渡效果，可以通过 transition 属性来配置：

export default {
  transition: 'fade'
}

你可以在 assets/css/main.css 中定义过渡效果的 CSS 类：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

7. 路由守卫

Nuxt.js 提供了 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 等路由守卫方法，用于在路由切换时执行某些逻辑。

-- -------------------- ---- -------
------ ------- -
  -------------------- ----- ----- -
    -- ---------
    -------
  --
  -------------------- ----- ----- -
    -- ---------
    -------
  -
-

通过这些配置，你可以灵活地控制 Nuxt.js 应用的路由行为。