9.5 路由
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.vueNuxt.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 }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}如果校验方法返回的值不为true， Nuxt.js 将自动加载显示 404 错误页面。
想了解关于路由参数校验的信息，请参考页面校验API。
嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父级 Vue 文件内增加<nuxt-child/>用于显示子视图内容。
假设文件结构如：
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vueNuxt.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.vueNuxt.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'
}
]
}
]
}
]
}过渡动效
Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。
全局过渡动效设置
Nuxt.js 默认使用的过渡效果名称为page
如果想让每一个页面的切换都有淡出 (fade) 效果，我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在assets/目录下创建这个文件：
在全局样式文件assets/main.css里添加一下样式：
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}然后添加到nuxt.config.js文件中：
module.exports = {
css: [
'assets/main.css'
]
}关于过渡效果transition属性配置的更多信息可参看页面过渡效果API。
页面过渡动效设置
如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置transition字段即可：
在全局样式assets/main.css中添加一下内容：
.test-enter-active, .test-leave-active {
transition: opacity .5s;
}
.test-enter, .test-leave-active {
opacity: 0;
}然后我们将页面组件中的transition属性的值设置为test即可：
export default {
transition: 'test'
}关于过渡效果transition属性配置的更多信息可参看页面过渡效果API。
中间件
中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
每一个中间件应放置在middleware/目录。文件名的名称将成为中间件名称(middleware/auth.js将成为auth中间件)。
一个中间件接收context作为第一个参数：
export default function (context) {
context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
}中间件执行流程顺序：
nuxt.config.js- 匹配布局
- 匹配页面
中间件可以异步执行,只需要返回一个Promise或使用第2个callback作为第一个参数：
middleware/stats.js
import axios from 'axios'
export default function ({ route }) {
return axios.post('http://my-stats-api.com', {
url: route.fullPath
})
}然后在你的nuxt.config.js、 layouts 或者 pages 中使用中间件:
nuxt.config.js
module.exports = {
router: {
middleware: 'stats'
}
}stats中间件将在每个路由改变时被调用。
如果你想看到一个使用中间件的真实例子，请参阅在 GitHub 上的example-auth0。