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 ...
随机推荐
- Spring Boot 之:Spring Boot Admin
client 连接都 admin 时报错: 2019-08-22 11:58:37.695 ERROR 55095 --- [nio-8000-exec-1] o.a.catalina.connect ...
- Gradle 学习资料
Gradle 学习资料 网址 Gradle 使用指南 http://wiki.jikexueyuan.com/project/gradle/ 寄Android开发Gradle你需要知道的知识 http ...
- 搭建unity客户端
1.新建个unity的项目ChatClient 2.在unity的Main Camera下挂载个脚本PhotonServerEngine做为与服务器端通信的脚本 3.在PhotonServerEngi ...
- SQL语言基础和数据库操作
Sql语言基础: 核心思想:我们自己构造一段查询的代码,然后添加到语句后,从而得到想要的某些数据. Mysql是一种开源数据库 APP Serv:Apache+php+mysql,相当于phpstud ...
- CF300D Painting Square
Painting Square https://codeforces.com/problemset/problem/300/D 给了一个理解起来较复杂但是本质上很简单的分形. 题解 很显然,只有边长为 ...
- Bomb Enemy
Description Given a 2D grid, each cell is either a wall 'W', an enemy 'E' or empty '0' (the number z ...
- 文件夹上传插件webupload插件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- 在WinDbg中显示和搜索std::map内容
我们希望在WinDbg中自动显示.搜索和过滤std::map对象.std::vectors的脚本相对简单,因为vectors中数据的平面结构:map是更复杂的野兽.具体地说,Visual C++ ST ...
- 在WinDbg中显示和搜索std::vector内容
WinDbg从来都不擅长可视化.尽管Visual Studio一直都有autoexp.dat,而且最近还出现了本机调试器可视化工具,但WinDbg用户不得不满足于转储内存区域和搜索内存来识别模式.另一 ...
- Spring Could Stream 基本用法
Spring Cloud Stream是一个建立在Spring Boot和Spring Integration之上的框架,有助于创建事件驱动或消息驱动的微服务. 通过它可以更方便的访问消息服务,如消费 ...