当前位置: 首页 > news >正文

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方法

相关文章:

  • zlib 在 Visual Studio 2005 下编译失败的解决办法
  • nuxt 核心原理5 路由表的遍历处理 从后端路由层拦截
  • 网络聊天室(Java)
  • react ssr方法
  • Palm之祭
  • 304详解 gzip压缩 虚拟主机
  • 看Borland IDE向何处去
  • jwt原理
  • 我的BCB情缘
  • koa session 签名 cookie等
  • 作了Redhat Linux的基础课测试,刚好达到及格的标准,还是要多加学习啊!
  • express精简
  • react hooks1
  • CC2e:《代码大全(第2版)》集萃
  • js 数组API之every、some用法
  • __proto__ 和 prototype的关系
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • AngularJS指令开发(1)——参数详解
  • ECS应用管理最佳实践
  • export和import的用法总结
  • mac修复ab及siege安装
  • PermissionScope Swift4 兼容问题
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Redis字符串类型内部编码剖析
  • Vue2.x学习三:事件处理生命周期钩子
  • 从零开始在ubuntu上搭建node开发环境
  • 马上搞懂 GeoJSON
  • 删除表内多余的重复数据
  • 一份游戏开发学习路线
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • linux 淘宝开源监控工具tsar
  • 阿里云重庆大学大数据训练营落地分享
  • ​你们这样子,耽误我的工作进度怎么办?
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #大学#套接字
  • $L^p$ 调和函数恒为零
  • (5)STL算法之复制
  • (day6) 319. 灯泡开关
  • (Python第六天)文件处理
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (推荐)叮当——中文语音对话机器人
  • (一)appium-desktop定位元素原理
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • (转)编辑寄语:因为爱心,所以美丽
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .NET Remoting学习笔记(三)信道
  • .net 中viewstate的原理和使用
  • @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
  • []error LNK2001: unresolved external symbol _m
  • [C++]C++类基本语法