现在 Vue.js 大多数用于单页面应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病，单页面应用在访问时会将所有的文件进行加载，首屏访问需要等待一段时间，也就是常说的白屏，另外一点是总所周知的 SEO 优化问题。
Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，那就再合适不过了。
Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网
1.安装nuxt.js
1.npm install create-nuxt-app -g
2. 新建一个文件夹不能有中文和空格不然会出错
3. 在新建的文件夹执行npx create-nuxt-app
2.nuxt.js 的 路由是自动生成
1. 页面跳转用的是<nuxt-link :to="{name:"页面的地址"}>
注：<router-link> 也可以 也可以用函数编程this.$router.push
正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的。
但，后面说将来我们会为<nuxt-link>组件增加更多的功能特性，例如资源预加载，用于提升 nuxt.js 应用的响应速度。
当写这篇文章时，nuxt.js 官方已经实现了如它所说的将来功能特性。也许API文档没有及时更新吧！
所以特性正如上面前面的问题。
2. validate 函数 可以拦截跳转的页面
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
validate({ params, query }) { return true // 如果参数有效 return false // 参数无效，Nuxt.js 停止渲染当前页面并显示错误页面 } //promise validate({ params, query, store }) { return new Promise((resolve) => setTimeout(() => resolve())) } //正则 validate ({ params }) { // Must be a number return /^\d+$/.test(params.id) }
3.asyncData
async asyncData() { return await new Promise((resolve, reject) => { setTimeout((_) => { resolve({ data: { message: "菜菜大佬", }, }); }, 2000); }); },
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
4.自定义error页面
新建文件夹根目录下面/layouts/error.vue
props:['error'] 接受错误信息
页面传递
async asyncData(ctx) { return await new Promise((resolve, reject) => { setTimeout((_) => { reject({ data: { message: "菜菜大佬", }, }); ctx.error({ message:"失败" }) }, 2000); }); },
5.Loading配置
this.$nuxt.$loading.start(); this.$nuxt.$loading.finish()
Nuxt js config Loading 配置
键 |
类型 | 默认值 | 描述 |
color |
String | 'black' |
进度条的颜色 |
failedColor |
String | 'red' |
页面加载失败时的颜色 （当 data 或 fetch 方法返回错误时）。 |
height |
String | '2px' |
进度条的高度 (在进度条元素的 style 属性上体现)。 |
throttle |
Number | 200 |
在ms中，在显示进度条之前等待指定的时间。用于防止条形闪烁。 |
duration |
Number | 5000 |
进度条的最大显示时长，单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。 |
continuous |
Boolean | false |
当加载时间超过duration时，保持动画进度条。 |
css |
Boolean | true |
设置为false以删除默认进度条样式（并添加自己的样式）。 |
rtl |
Boolean | false |
从右到左设置进度条的方向。 |
6. head函数
1.动态修改页面title
head () { return { title:"菜菜大佬威武霸气" } },
7.middleware 中间件
nuxt.js 配置
router: { middleware: "index" }
//js文件 export default function ({ route }) { console.log(route.path,'zzzz') }
