一、路由

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

要在页面之间使用路由，建议使用 < nuxt-link> 标签。

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

1、基础路由

• 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'}]
}

<!--pages/index.vue -->
<template><div><h1>Page index</h1><nuxt-child /></div>
</template><!-- pages/user/index.vue -->
<template><div><h1>Users index</h1></div>
</template><!-- pages/user/one.vue -->
<template><div><h1>User one</h1></div>
</template>

测试结果：

• http://localhost:3000/

• http://localhost:3000/user
  

• http://localhost:3000/user/one
  

2、动态路由

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

pages 目录结构：

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'}]
}

<!--pages/index.vue -->
<template><div><h1>Page index</h1><nuxt-child /></div>
</template><!-- pages/users/_id.vue -->
<template><div><h1>Users index</h1></div>
</template><!-- pages/_slug/index.vue -->
<template><div><h1>_slug index</h1></div>
</template><!-- pages/_slug/index.vue -->
<template><div><h1>_slug comments</h1></div>
</template>

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

测试结果：

http://localhost:3000

http://localhost:3000/users/

http://localhost:3000/123/

http://localhost:3000/123/comments

3、路由参数校验

可以在动态路由组件中定义参数校验方法

例如：在 pages/users/_id.vue 文件中定义 validate 方法

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

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

4、嵌套路由

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

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

• pages 目录结构

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'}]}]
}

<!-- pages/users.vue -->
<template><div><h1>Users Page</h1><nuxt-child /></div>
</template><!-- pages/users/_id.vue -->
<template><div><h1>User _id</h1></div>
</template><!-- pages/users/index.vue -->
<template><div><h1>Users index</h1></div>
</template>

测试结果：

• http://localhost:3000/users

• http://localhost:3000/users/123

二、声明式导航

pages 目录结构：

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

<template><div><nav><!-- 使用<nuxt-link>实现页面导航 --><nuxt-link to="/">pages</nuxt-link><nuxt-link to="/users/123">Users _id</nuxt-link><nuxt-link to="/users">Users</nuxt-link></nav><!-- nuxt2中必须添加<Nuxt />标签，否则 pages 中的页面不显示--><Nuxt /></div>
</template>

三、重定向

方式一、配置 nuxt.config.js 实现

需要先清除 nuxt 默认生成的路由，否则会与配置的路由冲突。

router: {extendRoutes (routes, resolve) {// 首先清除默认的根路由const routesToRemove = ['/', '/users']routesToRemove.forEach(path => {const index = routes.findIndex(route => route.path === path)if (index > -1) {routes.splice(index, 1)}})// 添加新的重定向规则routes.push({path: '/',redirect: '/users/test'})routes.push({path: '/users',redirect: { name: 'about' }})// 打印所有路由，用于调试console.log('所有路由配置:',routes.map(route => ({path: route.path,redirect: route.redirect})))}}

方式二、中间件来实现

middleware/redirect.js

其中函数的参数为可选

export default function ({isHMR,app,store,params,error,redirect,route
}) {if (isHMR) {return}// 重定向规则const redirectRules = {'/': '/users/test', // 将根路径重定向到 /users/test'/users': '/about' // 将 /users 重定向到 /about}// 检查当前路径是否需要重定向if (redirectRules[route.path]) {return redirect(redirectRules[route.path])}
}

nuxt.config.js

export default {router: {middleware: ['redirect']}
}