vue使用watch 观察路由变化,重新获取内容


Posted in Javascript onMarch 08, 2017

问题背景:

点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图:

vue使用watch 观察路由变化,重新获取内容

页面代码如下:

<script>
  export default {
    data() {
      return {
        data: {}
      }
    },
    methods: {
     fetchDate() {
     // 使用 axios获取数据
     ......
    },
    created() {
     this.fetchDate();
    }
  }
</script>

解决办法:

使用 watch,观察路由,一旦发生变化便重新获取数据!

<script>
  export default {
    data() {
      return {
        data: {}
      }
    },
    methods: {
     fetchDate() {
     // 使用 axios获取数据
     ......
    },
    created() {
     // 组件创建完后获取数据,
     // 此时 data 已经被 observed 了
     this.fetchDate();
    },
    watch: {
     // 如果路由有变化,会再次执行该方法
     "$route": "fetchDate"
    }
  }
</script>

vue使用watch 观察路由变化,重新获取内容

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
webpack HappyPack实战详解
Oct 08 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
详解Vue监听数据变化原理
Mar 08 #Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
vue-resourse将json数据输出实例
Mar 08 #Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 #Javascript
You might like
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
理解javascript模块化
2016/03/28 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
浅析使用Python搭建http服务器
2019/10/27 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android