nuxt核心原理4nuxt的asyncData在方法内没有办法通过 this调用
1，问题分析：
由于asyncData方法是在组件初始化 前被调用的，并且是在服务端调用所以该方法是没有办法通过 this 来引用的，也就意味着只能在首次重新加载的时候调用，如果遇到了分页，当页码改变的时候不能做服务端的调用。
2，解决方法：
nuxt的官方文档中提供了watchQuery属性可以监听参数字符串的更改。
如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。 为了提高性能，默认情况下禁用。
如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.
3，watchQuery的使用方法：
首先如果要全局使用watchQuery，那就在nuxt.config.js中全局配置
module.exports = {
watchQuery: true
}
1
2
3
如果不在nuxt.config.js中全局配置，那就默认是只在当前页面的监听
// 分页点击事件的方法
pageChange (page) {
this.currentPage = page
//在页码改变的时候要将参数以query的形式传到路径上
this.$router.push({
path:'/template',
query:{
page:page
}
})
},
1
2
3
4
5
6
7
8
9
10
11
12
watchQuery其实监听的是路径上参数的变化，从而调用
asyncData方法
其原理也是利用的是a标签，但是如果用a标签去跳转的话，每次改变参数，页面就会重新去刷新，那么页面就会有抖动效果，用户体验并不好，但是watchQuery去监听的方式并不会出现这样的情况
export default {
//此处的page是当前路径上参数的key名
watchQuery: ['page']
}
1
2
3
4
这样就可以参数改变重新调用asyncData方法