vue 路由参数变化,页面不更新的问题
监控$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 路由参数变化,页面不更新的问题的更多相关文章
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- VUE 路由参数改变重新刷新数据
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...
- Vue路由参数
vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...
- 【问题】VUE 同一页面路由参数变化,数据不刷新
依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- Vue中解决路由切换,页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...
- Vue 路由切换时页面内容刷新页面并更新数据
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...
- vue路由参数的获取、添加和替换
获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...
- VUE 同一页面路由参数变化,视图不刷新的解决方案
1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...
随机推荐
- office2016系列产品关闭时卡顿
关闭Print Spooler服务其方法如下: win+r键–>输入services.msc点击确定如下图 单击word中的文件-选项-加载项-COM加载项-转到,将所有加载项前面的勾都去掉(不 ...
- linux MYSQL大小写问题处理
1)window下默认大小写不敏感,所以在window下.创建表 test后再想创建表TEST会报错.而linux下默认可以.认为是不同的两张表 2)linux创建数据库,安装完毕后 首要任务是在li ...
- elasticSearch-header
elasticSearch既有chrome的插件 sense,但是因为chrome作为恶意插件不让植入,因此sense目前还停留在5版本. elasticSearch自带head plugin,用于监 ...
- LeetCode题解:Flatten Binary Tree to Linked List:别人的递归!
总是在看完别人的代码之后,才发现自己的差距! 我的递归: 先把左侧扁平化,再把右侧扁平化. 然后找到左侧最后一个节点,把右侧移动过去. 然后把左侧整体移到右侧,左侧置为空. 很复杂吧! 如果节点很长的 ...
- JAVA8-待续
1. 函数式编程,因为在并发和时间驱动编程中的优势,函数式编程又逐渐流行起来 以前是实现一个比较器需要实现Comparator接口,并重写compare方法,以下为两种实现方法(类似还有线程,事件等) ...
- SpringMVC是单例的
spring的controller是单例还是多例,结果我傻逼的回答当然是多例,要不然controller类中的非静态变量如何保证是线程安全的,这样想起似乎是对的,但是不知道(主要是我没看过spring ...
- tar 打包当前目录下文件但不包括该录
今天想打包一些文件,但是不想把该目录打包进去 比如我想把test目录下文件打个包,安装正常的命令来 tar zcf test.tar.gz test 这样肯定会把test目录也打进去,解压后肯定是te ...
- 【367】通过 python 实现 SVM 硬边界 算法
参考: 支持向量机整理 SVM 硬边界的结果如下: $$min \quad \frac{1}{2} \sum_{i=1}^m\sum_{j=1}^m \alpha_i\alpha_jy_iy_j \v ...
- Python下HttpHTTPClient和AsyncHTTPClient
HTTPClient 使用例子: from tornado.httpclient import HTTPClient def synchronous_fetch(url): http_client = ...
- Vue2 实例中的 data 属性三种写法与作用:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...