当前位置: 首页 > news >正文

Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载

vue通过this.$router.push给url传参,改变url但是当前页面不会自动刷新

跳转页面代码

this.$router.push({name: 'allbusiness',query: {pw_id: item.id}
});

1.使用 watch 监听 $route 对象的变化,当路由发生变化时重新加载数据或执行其他操作。

2.利用路由参数来传递参数,并响应参数变化重新加载页面数据。

Vue中给当前页面传递参数并重新加载

// 在组件的 created 钩子中监听 $route 对象的变化
created() {this.loadData(); // 初始化加载数据this.$watch('$route', () => {this.loadData(); // 监听路由变化,重新加载数据});
},

在组件的 created 钩子中初始化加载数据,并使用 $watch 监听 $route 对象的变化。当路由参数发生变化时,调用 loadData 方法重新加载数据。确保路由参数的变化会触发重新加载数据的逻辑。
在传递参数时,可以使用路由参数或查询参数,根据具体情况选择适合的方式。希望这个示例能帮助你实现在Vue中给当前页面传参并重新加载数据的功能。

http://www.lryc.cn/news/318435.html

相关文章:

  • 【扩散模型(一)】综述:扩散模型在文本生成领域应用
  • K8S Pod
  • 反向传播(backward propagation,BP) python实现
  • 简单算命脚本
  • Lua-掌握Lua语言基础1
  • python-0003-pycharm开发虚拟环境中的项目
  • 修改 MySQL update_time 默认值的坑
  • 基于亚马逊云EC2+Docker搭建nextcloud私有化云盘
  • 用try...catch进行判断
  • 服务器遭遇挖矿病毒syst3md及其伪装者rcu-sched:原因、症状与解决方案
  • 此机非彼机,工业计算机在工业行业的特殊地位
  • Python使用lxml解析XML格式化数据
  • CDA-LevelⅡ【考题整理-带答案】
  • 20240304 json可以包含复杂数组(数组里面套数组)
  • 算法50:动态规划专练(力扣514题:自由之路-----4种写法)
  • 重学SpringBoot3-集成Thymeleaf
  • 【数据可视化】Echarts最常用图表
  • flink:通过table api把文件中读取的数据写入MySQL
  • 【Java 多线程 哈希表】 HashTable, HashMap, ConcurrentHashMap 之间的区别
  • 有趣之matlab-烟花
  • C语言指针与数组(不适合初学者版):一篇文章带你深入了解指针与数组!
  • springboot Mongo大数据查询优化方案
  • Ollama管理本地开源大模型,用Open WebUI访问Ollama接口
  • Linux--基本知识入门
  • 基于springboot+vue实现的大学计算机课程管理平台的设计与实现(全套资料)
  • LeetCode2115. 从给定原材料中找到所有可以做出的菜
  • 项目性能优化—性能优化的指标、目标
  • 蓝桥杯刷题(三)
  • 20240312-算法复习打卡day21||● 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先
  • 今天我们来学习一下关于MySQL数据库