nuxt的asyncData在方法内没有办法通过 this调用

1，问题分析：

由于asyncData方法是在组件初始化 前被调用的，并且是在服务端调用所以该方法是没有办法通过 this 来引用的，也就意味着只能在首次重新加载的时候调用，如果遇到了分页，当页码改变的时候不能做服务端的调用。

2，解决方法：

nuxt的官方文档中提供了watchQuery属性可以监听参数字符串的更改。

如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。 为了提高性能，默认情况下禁用。

如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.

3，watchQuery的使用方法：

首先如果要全局使用watchQuery，那就在nuxt.config.js中全局配置

module.exports = {
    watchQuery: true
}

如果不在nuxt.config.js中全局配置，那就默认是只在当前页面的监听

// 分页点击事件的方法

pageChange (page) {
    this.currentPage = page
    //在页码改变的时候要将参数以query的形式传到路径上
    this.$router.push({
        path:'/template',
        query:{
            page:page
        }
    })
},

watchQuery其实监听的是路径上参数的变化，从而调用
asyncData方法

其原理也是利用的是a标签，但是如果用a标签去跳转的话，每次改变参数，页面就会重新去刷新，那么页面就会有抖动效果，用户体验并不好，但是watchQuery去监听的方式并不会出现这样的情况

export default {
   //此处的page是当前路径上参数的key名
    watchQuery: ['page'] 
}

这样就可以参数改变重新调用asyncData方法