vue3(十七)-基础入门之vue-nuxt路由
一、路由
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']
}
}
原文地址：https://blog.csdn.net/weixin_43520586/article/details/143985746
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！