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

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

一、默认路由

Nuxt.js 依据

pages

目录结构自动生成 vue-router 模块的路由配置。

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

<nuxt-link>

标签。

例如:

<template><nuxt-linkto="/">首页</nuxt-link></template>

基础路由

假设

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

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

如果校验方法返回的值不为

true

或

Promise

中 resolve 解析为

false

或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

嵌套路由

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

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

Warning: 别忘了在父组件(

.vue

文件) 内增加

<nuxt-child/>

用于显示子视图内容。

假设文件结构如：

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

将处理这样的请求：
PathFile

/

index.vue

/people

people/index.vue

/people/123

people/_id.vue

/about

_.vue

/about/careers

_.vue

/about/careers/chicago

_.vue

处理 404 页面，现在符合

_.vue

页面的逻辑。

二、自定义路由

Nuxt.js 依据

pages

目录结构自动生成 vue-router 模块的路由配置。但是有些情况下需要根据项目的实际情况去定义一个路由,比如 y.js.cn 它也是用Nuxt开发的，访问页面是带了

.html

的后缀，给人一种错觉感。这种情况该怎么办呢？nuxt 也是给我们提供了方法。

nuxt.config.js配置文件

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

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

extendRoutes()

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

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

routes

是一个数组，该数组是 nuxt 在初始化的时候自己根据 pages 生成的路由配置。如果我们需要扩展路由，只需要向

routes

中 push 一条数据即可，而 resolve 是一个函数，用于获取组件的方法。

在定义路由组件的时候，我们需要通过

resolve('组件绝对地址')

来定义组件，这个是比较特殊的

插入一条数据：

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

启动项目后，在浏览器输入

localhost:3000/test.html

我们将看到如下效果：

看到这里，不要高兴，这里虽然自定义路由带后缀访问，配置成功了，但Nuxt默认生成的路由保留的
如果你希望清空 nuxt 系统生成的路由配置的时候，nuxt 并没有提供相应的 api。但我们可以根据数组的特性，使用一些方法来实现这个功能

清空数组：

//  nuxt.config.js exportdefault{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开发的。😂😂😂😂