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保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
js实现汉字排序的方法
Jul 23 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
js回调函数原理与用法案例分析
Mar 04 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中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
后勤自我鉴定
2013/10/13 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
战友聚会主持词
2014/04/02 职场文书
铣工实训报告
2014/11/05 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
聘任书的格式及模板
2019/10/28 职场文书
导游词之天津古文化街
2019/11/09 职场文书
python 逐步回归算法
2021/04/06 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫