Nuxt.js 如何配置 router？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

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 添加新的路由，或者修改现有的路由。

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

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 等路由守卫方法，用于在路由切换时执行某些逻辑。

// www.javascriptcn.com code example
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由之前执行
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开路由之前执行
    next();
  }
}

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

Nuxt.js 如何配置 router？

推荐答案