一、默认路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用
<nuxt-link>标签。
例如:
<template>
<nuxt-link to="/">首页</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
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文件) 内增加<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
将处理这样的请求：
| Path | File |
|---|---|
/ |
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
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 系统生成的路由配置的时候，nuxt 并没有提供相应的 api。但我们可以根据数组的特性，使用一些方法来实现这个功能
清空数组：文章来源：https://www.toymoban.com/news/detail-605096.html
// 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开发的。😂😂😂😂文章来源地址https://www.toymoban.com/news/detail-605096.html
到了这里，关于Nuxt路由配置，自定义路由配置 - 实战教程基础-Day04的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
