什么是Nuxt.js 路由

发布时间：2023-04-13 13:57:41 所属栏目：教程来源：

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

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

例如:

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

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 文件。

：API Configuration generate

警告：generate 命令会忽略动态路由: API Configuration generate

路由参数校验
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 错误页面。

想了解关于路由参数校验的信息，请参考页面校验API。

嵌套路由
你可以通过 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
Note: 处理404页面，现在符合_.vue页面的逻辑。

命名视图
要渲染命名视图，您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置：

export default {
router: {
extendRoutes (routes, resolve) {
const index = routes.findindex(route => route.name === 'main')
routes[index] = {
...routes[index],
components: {
default: routes[index].component,
top: resolve(__dirname, 'components/mainTop.vue')
},
chunkNames: {
top: 'components/mainTop'
}
}
}
}
}
它需要使用两个属性 components 和 chunkNames 扩展路由。此配置示例中的命名视图名称为 top 。

SPA fallback
您也可以为动态路由启用SPA fallback。在使用mode:'spa'模式下，Nuxt.js将输出一个与index.html相同的额外文件。如果没有文件匹配，大多数静态托管服务可以配置为使用SPA模板。生成文件不包含头信息或任何HTML，但它仍将解析并加载API中的数据。

我们在nuxt.config.js文件中启用它：

export default {
generate: {
fallback: true, // if you want to use '404.html'
fallback: 'my-fallback/file.html' // if your hosting needs a custom location
}
}
在Surge上实现
Surge 可以处理200.html 和 404.html，generate.fallback默认设置为200.html，因此无需更改它。

在 GitHub Pages 和 Netlify 上实现
GitHub Pages 和 Netlify 自动识别 404.html文件，所以我们需要做的就是将 generate.fallback 设置为 true！

在 Firebase Hosting 上实现
要在Firebase Hosting上使用，请将 generate.fallback 配置为 true 并使用以下配置(more info)：

{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/404.html"
}
]
}
}
过渡动效
Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!