监控$route

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果。

举例:当前路由为  /pjthome?pjtid=123456

mounted: function () {
this.pjtid = this.$route.query.pjtid
this.pjtdetail()
},
在页面pjtdetail()方法中,需要用到pjtid这个参数,假如在同一页面有相似项目切换,只是pjtid发生变化,在切换时,并未重新加载数据,原因是跟vue的生命周期有关,具体该解决这个问题,添加路由监听即可。

exp:

watch: {
$route(){
this.pjtid = this.$route.query.pjtid
},
pjtid() {
this.pjtdetail()
},
}
解决。
---------------------
作者:酷酷小七
来源:CSDN
原文:https://blog.csdn.net/weixin_37861326/article/details/80525720
版权声明:本文为博主原创文章,转载请附上博文链接!

如:

<script>
export default {
data() {
return {
isApp: true,
}
},
mounted() {
this.caseId = this.$route.query.caseId;
this.isApp = (this.$route.query.type == 'APP定制') ? true : false;
},
methods: {
getIsApp() {
this.isApp = (this.$route.query.type == 'APP定制') ? true : false;
}
},
watch: {
$route(){
this.isApp = this.$route.query.type;
},
isApp() {
this.getIsApp();
},
}
}
</script>

vue 路由参数变化,页面不更新的问题的更多相关文章

  1. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  2. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  3. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  4. 【问题】VUE 同一页面路由参数变化,数据不刷新

    依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...

  5. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  6. Vue中解决路由切换,页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  7. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  8. vue路由参数的获取、添加和替换

    获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...

  9. VUE 同一页面路由参数变化,视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...

随机推荐

  1. TP框架(接口文档模板框架)

    https://blog.csdn.net/s390124971/article/details/51995497

  2. 把网卡中断绑定到CPU,最大化网卡的吞吐量(转)

    先来看一下问题, 我们通过 ifconfig 查看接口的名称 为 p15p1, 一般机器为 eth0 再通过命令 ➜ ~ cat /proc/interrupts | head -n 1 && ...

  3. Java重写equals方法(重点讲解)

    为什么equals()方法要重写? 判断两个对象在逻辑上是否相等,如根据类的成员变量来判断两个类的实例是否相等,而继承Object中的equals方法只能判断两个引用变量是否是同一个对象.这样我们往往 ...

  4. NIPS 2016上22篇论文的实现汇集

    http://blog.csdn.net/jiandanjinxin/article/details/54087592 日前,LightOn CEO 兼联合创始人 Igor Carron 在其博客上放 ...

  5. Haskell语言学习笔记(76)Data.Tree

    Data.Tree data Tree a = Node { rootLabel :: a, subForest :: Forest a } deriving (Eq, Read, Show) typ ...

  6. shell编程小技巧(命令篇)

    本文主要介绍shell编程中一些好用的命令或者一些常见命令但比较少用却又好用的参数,目的是希望可以提高编码效率. df命令 常用命令 df / df -k / df -m / df -H / df - ...

  7. Android Bug:Error:com.android.dex.DexException: Multiple dex files define Landroid/support/design/widget/CoordinatorLayout$LayoutParams;

    项目编译通过,运行时出现异常: Error:com.android.dex.DexException: Multiple dex files define Landroid/support/desig ...

  8. semver 版本号命名法

    https://semver.org/lang/zh-CN/ 版本格式:主版本号.次版本号.修订号,版本号递增规则如下: 主版本号:当你做了不兼容的 API 修改, 次版本号:当你做了向下兼容的功能性 ...

  9. Hibernate学习笔记2.4(Hibernate的Id生成策略)

    通过设置告诉id该怎么设置. 1.通过xml方式 1.assigned 主键由外部程序负责生成,在 save() 之前必须指定一个.Hibernate不负责维护主键生成.与Hibernate和底层数据 ...

  10. C++ 关于滚动条的滚动问题

    SCROLLINFO scrollinfo; GetScrollInfo(SB_HORZ, &scrollinfo, SIF_ALL); switch (nSBCode) { case SB_ ...