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 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
Angular CLI 安装和使用教程
Sep 13 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 404错误页面实现代码
2009/06/22 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
ext 代码生成器
2009/08/07 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
JS实现合并json对象的方法
2017/10/10 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python numpy 常用函数总结
2017/12/07 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
优秀经理事迹材料
2014/02/01 职场文书
领导党性分析材料
2014/02/15 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
先进单位事迹材料
2014/12/25 职场文书
主持人开场白台词
2015/05/29 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android