网站首页 网站建设 IT知识 IT知识教程 vue使用watch 观察路由变化，重新获取内容

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

2021-05-26 21:10:57

问题背景：

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

页面代码如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章

Vue2.0用 watch 观察 prop 变化(不触发)
本文介绍了Vue2.0用watch观察prop变化(不触发)，分享给大家，具体如下：A组件：exportdefault{props:{name:{type:St
浅谈Vue数据响应
Vue中可以用$watch实例方法观察一个字段，当该字段的值发生变化时，会执行指定的回调函数（即观察者），实际上和watch选项作用相同。如下：vm.$watc
详解vue中computed 和 watch的异同
一、computed和watch都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。而通常更好的办法是使用computed属性，而
ES6 Proxy实现Vue的变化检测问题
Vue变化检测Object使用DefineProperty、数组使用方法拦截实现。最近，Vue3.0将采用ES6Proxy的形式重新实现Vue的变化检测，在官方
关于vue中watch检测到不到对象属性的变化的解决方法
前言在vue开发的过程中发现一个问题：改变vue.$data中对象的属性，watch是观测不到变化，但其实对象的属性是有变化的。这……，有点难以置信！正文nam

最新文章

载入进度条 效果
邮件发送简单例子-html文件
详解关于html，css，js三者的加载顺序问题
限制复选框的最大可选数
随鼠标上下滚动的jquery代码

hot 热门文章

python模拟登陆Tom邮箱示例分享
苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
蚂蚁森林节气签怎么领
华为mate30怎么更新系统？华为mate30更新手机系统教程
小米电视怎么下载斗鱼

猜你喜欢

JavaScript 命名空间 使用介绍
javascript ���名规则 变量命名规则
javascript 秒表计时器实现代码
Javascript 面向对象之重载
JavaScript 面向对象之命名空间
以上产品还未完全满足我的所有需求，在下方提交我的专属需求
我的专属需求：
*手机号：
*验证码：
img
咨询报价
现在咨询
img

在线咨询

建站在线咨询
img

获取方案

获取建站报价/方案

我们联系您img

img

微信咨询

扫一扫添加
动力姐姐微信
img
img

TOP

我们尽快联系您