VUE 同一页面路由参数变化,视图不刷新的解决方案
1.监听路由处理
watch: {
$route(to, from) {
// 逻辑
// 重新调用数据接口
}
},
2.beforeRouteUpdate导航守卫 路由更新时触发
beforeRouteUpdate (to, from, next) {
// 逻辑
this.$route.query.xx = to.params.xx;
next() // 一定要有next
},
3.只需要在入口文件设置监听事件即可
<div id="app" :key="Key">
</div>
data() {
return {
Key: ''
};
},
watch: {
$route: function(newUrl, oldUrl) {
this.Key = new Date().getTime();
}
}
VUE 同一页面路由参数变化,视图不刷新的解决方案的更多相关文章
- 【问题】VUE 同一页面路由参数变化,数据不刷新
依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...
- Vue自定义页面路由
错误1:webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:1 ...
- Vue下URL地址栏参数改变却不能刷新界面
在完成毕业设计(基于Vue的信息资讯展示与管理平台)的过程中,处理如下图所示的 点击左侧栏目列表跳转到对应文章列表 的问题时,初次点击可以跳转到对应的页面,但是当第二次点击时,虽然地址栏的参数改变了, ...
- vue 路由参数变化,页面不更新的问题
监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为 /p ...
随机推荐
- 缺jar包异常:java.lang.NoClassDefFoundError: org/springframework/core/convert/support/PropertyTypeDescriptor
严重: StandardWrapper.Throwable java.lang.NoClassDefFoundError: org/springframework/core/convert/suppo ...
- VC检测内存泄漏(Detected memory leaks!)
Detected memory leaks!Dumping objects ->{98500} normal block at 0x05785AD0, 152 bytes long.Data: ...
- Bootstrap 学习笔记1
<img src="..." class="img-responsive" alt="响应式图像"> 通过添加 img-resp ...
- Properties 取值和设置函数 Hashtable的静态内部类Entry的结构和克隆方法
- Buy Fruits-(构造)
https://ac.nowcoder.com/acm/contest/847/C 在blueland上有 n n个水果店,它们的编号依次为 0,1,2...n−1 0,1,2...n−1.奇妙的是, ...
- org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant pool: 19
在Maven上部署Struts2时,突然发生了如下错误,但是tomcat还能运行,发送错误的原因时Struts2的版本太高,和tomcat7不兼容. 开始Struts2用了2.5.20版本,后来换成2 ...
- ant-design-vue有v-decorator时defaultValue无效
<a-input v-decorator="[ 'userName', { rules: [ { required: true, message: '请输入您的账号!' } ], in ...
- luogu_3645: 雅加达的摩天楼
雅加达的摩天楼 题意描述: 有\(N\)座摩天楼,从左到右依次编号为\(0\)到\(N-1\). 有\(M\)个信息传递员,编号依次为\(0\)到\(M-1\).编号为i的传递员最初在编号为\(B_i ...
- 插入排序;至少要比较N(N-1)/2次;N表示元素个数
<script type="text/javascript"> //冒泡排序:至少要比较N(N-1)/2次:N表示元素个数 function get(){ var nu ...
- 【AtCoder】 ARC 096
link C-Half and Half 题意:三种pizza,可以花\(A\)价钱买一个A-pizza,花\(B\)价钱买一个B-pizza,花\(C*2\)价钱买A-pizza和B-pizza各一 ...