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 ...
随机推荐
- 葫芦娃团队项目Beta冲刺-总结
课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺 团队名称:葫芦娃队 作业目标:总结项目冲刺内容 githup地址:https://https://github.com/Baka ...
- python应用-表格式输出一组数据
def main(): names=['关羽','张飞','赵云','马超','貂蝉'] subjects=['语文','数学','Python'] table=[[0 for _ in range( ...
- CalcIntegerLength
private static int CalcIntegerLength(int iLen) { //String str_iLen = Convert.ToString(iLen); int str ...
- What is a Servlet?
Servlet 工作原理解析 https://www.ibm.com/developerworks/cn/java/j-lo-servlet/index.html 你可以理解为,Spring MVC是 ...
- uni验证码60秒倒计时
其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterva ...
- [React] Write a generic React Suspense Resource factory
Using Suspense within our component isn't exactly ergonomic. Let's put all that logic into a reusabl ...
- cc2530单片机的第一次实验,流水灯
第一个实验:控制流水灯 P1_0,P1_1,P0_4都连接在发光二极管的负极,所以,当这三个引脚为低电平,也就是0的时候,相应的发光二极管才会亮. 其实这里可以稍微的关注一下寄存器的地址,然后,编程的 ...
- ent facebook 开源的golang orm 框架
ent 是facebook 开源的golang orm 框架,简单强大,具有提下特性 schema 即代码 方便的图遍历 静态类型以及显示api 多种存储引擎支持(当前是mysql,sqlite,以及 ...
- 【题解】洛谷 P1080 国王游戏
目录 题目 思路 \(Code\) 题目 P1080 国王游戏 思路 贪心+高精度.按\(a \times b\)从小到大排序就可以了. \(Code\) #include<bits/stdc+ ...
- centos7 安装 bugfree3
. 安装apache yum install httpd . 安装mysql wget -i -c http://dev.mysql.com/get/mysql57-community-release ...