Nuxt路由配置，自定义路由配置 - 实战教程基础-Day04

• 一、默认路由
• • 基础路由
  • 动态路由
  • • 路由参数校验
  • 嵌套路由
  • 动态嵌套路由
  • 未知嵌套深度的动态嵌套路由
• 二、自定义路由
• • nuxt.config.js配置文件
  • extendRoutes()
• 三、总结

一、默认路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由，我们建议使用 标签。

例如:

基础路由

假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {routes: [{name: 'index',path: '/',component: 'pages/index.vue'},{name: 'user',path: '/user',component: 'pages/user/index.vue'},{name: 'user-one',path: '/user/one',component: 'pages/user/one.vue'}]
}

动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构：

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为：

router: {routes: [{name: 'index',path: '/',component: 'pages/index.vue'},{name: 'users-id',path: '/users/:id?',component: 'pages/users/_id.vue'},{name: 'slug',path: '/:slug',component: 'pages/_slug/index.vue'},{name: 'slug-comments',path: '/:slug/comments',component: 'pages/_slug/comments.vue'}]
}

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

路由参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子： pages/users/_id.vue

export default {validate({ params }) {// 必须是number类型return /^\d+$/.test(params.id)}
}

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 用于显示子视图内容。

假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下：

router: {routes: [{path: '/users',component: 'pages/users.vue',children: [{path: '',component: 'pages/users/index.vue',name: 'users'},{path: ':id',component: 'pages/users/_id.vue',name: 'users-id'}]}]
}

动态嵌套路由

这个应用场景一般比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。

假设文件结构如下：

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

Nuxt.js 自动生成的路由配置如下：

router: {routes: [{path: '/',component: 'pages/index.vue',name: 'index'},{path: '/:category',component: 'pages/_category.vue',children: [{path: '',component: 'pages/_category/index.vue',name: 'category'},{path: ':subCategory',component: 'pages/_category/_subCategory.vue',children: [{path: '',component: 'pages/_category/_subCategory/index.vue',name: 'category-subCategory'},{path: ':id',component: 'pages/_category/_subCategory/_id.vue',name: 'category-subCategory-id'}]}]}]
}

未知嵌套深度的动态嵌套路由

如果您不知道 URL 结构的深度，您可以使用_.vue动态匹配嵌套路径。这将处理与更具体请求不匹配的情况。

文件结构:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

将处理这样的请求：

处理 404 页面，现在符合_.vue页面的逻辑。

二、自定义路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。但是有些情况下需要根据项目的实际情况去定义一个路由,比如 y.js.cn 它也是用Nuxt开发的，访问页面是带了.html的后缀，给人一种错觉感。这种情况该怎么办呢？nuxt 也是给我们提供了方法。

nuxt.config.js配置文件

我们只需要在nuxt.config.js中的router选项中进行配置即可：

//  nuxt.config.js 
export default {router: {// 在这里配置路由}// 其他配置
}

extendRoutes()

在 router 中有一个 extendRoutes 方法允许我们去扩展路由：

//  nuxt.config.js 
export default {router: {extendRoutes(routes, resolve) {// 在这里进行路由扩展// routes 是当前的路由配置// resolve 是 nuxt 用于获取路由组件所定义的方法}}
}

routes 是一个数组，该数组是 nuxt 在初始化的时候自己根据 pages 生成的路由配置。如果我们需要扩展路由，只需要向 routes 中 push 一条数据即可，而 resolve 是一个函数，用于获取组件的方法。

在定义路由组件的时候，我们需要通过 resolve('组件绝对地址') 来定义组件，这个是比较特殊的

插入一条数据：

//  nuxt.config.js 
export default {router: {extendRoutes(routes, resolve) {routes.push({name: 'Test',path: '/test.html',component: resolve(__dirname, 'pages/test')})}}
}

启动项目后，在浏览器输入localhost:3000/test.html我们将看到如下效果：

如果你希望清空 nuxt 系统生成的路由配置的时候，nuxt 并没有提供相应的 api。但我们可以根据数组的特性，使用一些方法来实现这个功能

清空数组：

//  nuxt.config.js 
export default {router: {extendRoutes(routes, resolve) {// 清空数组routes.splice(0)// 插入新的路由配置routes.push({name: 'Test',path: '/test.html',component: resolve(__dirname, 'pages/test')})}}
}

三、总结

      以上就是Nuxt路由配置，跟自定义路由的介绍了，自定义路由只是稍稍带过一下，但是相信有了解过Vue，并难不倒你们，上述的自定义路由配置在nuxt.config.js里面，这样不利于项目维护，当然建议新建一个router.js用户维护路由。如需看Nuxt的自定义路由效果可以仔细了解了解 y.js.cn，它这个用Nuxt的自定义路由带了.html后缀访问，给人看起来就好像是html开发的。😂😂😂😂