生命周期
nuxtServerInit
应用场景是对 store 操作
middleware
nuxt.config.js => 匹配布局 => 匹配页面
validate
参数校验,校验失败,跳转到错误的页面
middleware() {
// console.log(window) 报错
console.log('middleware page')
},
// 参数的有效校验
validate({ parmas, query }) {
// 完成校验业务
return true
},
// 读数据 返回给目标组件
asyncData(context) {
// 异步业务逻辑,读取服务端数据
console.log('asyncData', this)
return {
b: 2
}
},
// 读数据 提交给vuex
fetch({ store }) {
// 异步业务逻辑,读取服务端数据提交给vuex
console.log('fetch');
},
// 以上是在服务端运行 客户端一些对象是没办法拿到 window 访问不了 this
data() {
a: 1
},
// beforeCreate 、 created 运行在客户端跟服务端 服务端会先运行
// 所以是拿不到window 可以访问this 这边的this会有服务端跟客户端的
beforeCreate() {
console.log('beforeCreate', this);
},
created() {
console.log('created');
},
// 剩下的生命周期 运行在客户端 可以访问this
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
}
网友评论