nuxt添加.html,Nuxt.js 路由
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.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
路由参数校验
Nuxt.js 可以让你在动态路由组件中定义参数校验方法。
举个例子: pages/users/_id.vueexport 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文件) 内增加 用于显示子视图内容。
假设文件结构如: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
将处理这样的请求:PathFile/index.vue
/peoplepeople/index.vue
/people/123people/_id.vue
/about_.vue
/about/careers_.vue
/about/careers/chicago_.vue
Note: 处理404页面,现在符合_.vue页面的逻辑。 有关404重定向的更多信息,请点击此处.
命名视图
要渲染命名视图,您可以在布局(layout) / 页面(page)中使用 或 组件。要指定页面的命名视图,我们需要在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 的组件来实现路由切换时的过渡动效。
全局过渡动效设置
提示 :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 = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}
中间件执行流程顺序:nuxt.config.js
匹配布局
匹配页面
中间件可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数:
middleware/stats.jsimport 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.jsmodule.exports = {
router: {
middleware: 'stats'
}
}
现在,stats 中间件将在每个路由改变时被调用。
您也可以将 middleware 添加到指定的布局或者页面:
pages/index.vue 或者 layouts/default.vueexport default {
middleware: 'stats'
}
如果你想看到一个使用中间件的真实例子,请参阅在 GitHub 上的example-auth0。
nuxt添加.html,Nuxt.js 路由相关推荐
- nuxt添加.html,Nuxt内导航栏的两种实现方式
方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...
- vue新框架nuxt通过文件目录自动生成路由
demo如图 自动生成的路由: 文件夹: Nuxt.js 集成了以下组件/框架,用于开发完整而强大的 Web 应用: Vue 2 Vue-Router Vuex (当配置了 Vuex 状态树配置项 时 ...
- Linux路由界面设置,nuxt中如何配置页面路由
nuxt中如何配置页面路由 发布时间:2020-11-06 15:16:34 来源:亿速云 阅读:248 作者:Leah 今天就跟大家聊聊有关nuxt中如何配置页面路由,可能很多人都不太了解,为了让大 ...
- vue mysql 电商_mei-shopone: nuxt(vue)+node(egg.js)+mysql晒点风格极简商城,电商系统。适合入门全栈开发,槑先森工作室。...
mei-shopone 前言 此项目是基于nuxt+egg+mysql开发的在线商城系统全栈模板,目前前端部分已适配移动端.面向开发人员友好,快速,轻巧,干净,并包含W3有效源代码.后台管理系统基于v ...
- [Vue.js] 路由 -- 前端路由
路由的基本概念与原理 路由 本质是对应关系 后端路由 概念 : 根据不同的用户URL请求,返回不同的内容 本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
- 使用Enide Studio 2014 IDE进行Express JS路由
This post is a continuation post of my previous post "Express JS WebApplication with Enide Stud ...
- framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序
framer x使用教程 The web is vast and it's full of static websites and apps. But just because those apps ...
- nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
- Asp.net 后台添加CSS、JS、Meta标签
下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.U ...
最新文章
- 17DOM之操作元素
- Android初级开发笔记-- activity启动模式的学习(1)
- Windows10 UWP开发 - 响应式设计
- 物体识别_小鼠新物体识别Protocol
- amazeui学习笔记一(开始使用4)--Web App 相关
- linux 升级mysql版本 lamp_Linux 下安装 LAmp及配置
- Linux Shell笔记2 函数
- C++基础::类设计的几大原则
- 用函数指针控制排序的顺序
- 大前端(全栈)学习路线指南
- abaqus6.14安装教程 如何设置中文
- 计算机网络工程师 一共几级,2020年计算机软考网络工程师中级多少分过
- V10抢单系统源码(新增连单管理功能)
- DotNetCore CAP
- winscp 查看隐藏文件
- 《林林数据结构笔记》线段树求数组区间和,单点更新,区间更新+lazy思想
- 融创年报再获佳绩,“地产+”业务快速崛起,融创天花板在哪里?
- 淘宝网店如何提升无线端宝贝权重,抢占更多无线流量?
- 【开源分享】多端发布的单商户商城系统
- 机器人磨内孔_半导体阀块内孔机器人打磨,效果超乎想象!
热门文章
- :summary-method=“getSummaries“
- 02 A计划:自我塑造的九段心法
- 最详细的cmder配置
- linux编译ffmpeg(一)
- 伽马分布,指数分布,泊松分布的关系 -转自简书
- whoosh mysql_Whoosh搜索引擎
- 51任务17:定时器控制数码管从00-59,1秒增一
- DevOps基础-5.3-持续交付:持续交付流水线
- 计算机基础845,中职计算机基础 (845)(14页)-原创力文档
- Leaflet加载百度瓦片到WGS84坐标系下