Vue刷新当前页面并带参

最新推荐文章于 2024-03-15 20:00:00 发布
最新推荐文章于 2024-03-15 20:00:00 发布
阅读量1.2k 收藏 1
点赞数
文章标签： web前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45478056/article/details/124160912
版权
本文介绍了在Vue中遇到的页面刷新和参数更新问题。作者探讨了使用`this.router.go(0)`直接刷新导致参数无法更新的情况，以及尝试通过空白页跳转和replace方法时遇到的错误。最终，作者提出了一种解决方案：先使用replace到相同页面，然后利用`this.$router.go(0)`触发刷新，尽管这种方法会导致短暂的白屏现象。
摘要由CSDN通过智能技术生成

需求是点击后进行带参数页面刷新

问题1 一开始是直接使用this.router.go(0)进行刷新的话无法对参数进行更新 Vue刷新当前页面几种方式

问题2 使用空白页跳转时第一次replace时会报错
在这里插入图片描述
于是进行资料查找把该文章的三种方法都尝试过后都没有效果（不知道为什么！）

最后想到当我直接replace（或者push）同一页面时虽然页面内容不刷新 ，但是浏览器URL已经改变。所以我在此时进行一次this.$router.go(0)来进行刷新完成效果（虽然有白屏）

NNNNn4nnNn
关注
vue路由传参，刷新页面后参数类型改变
weixin_44487203的博客
05-12 1369
vue路由传参页面刷新后参数类型改变
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
vue刷新当前页面重新传递参数
way_wan的博客
08-30 4826
vue刷新当前页面重新传递参数 在vue中碰到了需要刷新当前页面并传递重新params参数的需求。 我们可以进入空白页再在空白页跳转回到上一个页面实现需求 首先在空白页写上路由守卫beforeRouteEnter，在beforeRouteEnter中获取到上一个路由，直接跳转回去 //空白页面 export default { beforeRouteEnter(to, from, next) { next((xq) => { //要注意，必须使用this.$router.repla
vue 跳转当前页面改变url携带的参数并刷新页面
lovewangyage的博客
02-19 1451
vue 跳转当前页面改变url携带的参数并刷新页面
vue router 刷新当前页面并传值
Yangliwei的博客
02-26 3902
1，vue-router在路由是当前页面时，不能刷新，router.push不能用 2，可以用强制刷新 this.$router.go(0) location.reload() 3，使用provide / inject 在app.vue中写入如下代码： <template> <div id="app"> <router-view v-if...
vue 刷新当前页面的方式
qq_45327886的博客
11-04 4295
vue 刷新当前页面的方式
Vue中给当前页面传递参数并重新加载，vue使用this.$router.push跳转页面，给跳转过去的页面传参不一致时重新加载
最新发布
G佳伟
03-15 1372
使用 watch 监听 $route 对象的变化，当路由发生变化时重新加载数据或执行其他操作。 利用路由参数来传递参数，并响应参数变化重新加载页面数据。 下面是一个示例代码，演示了如何在Vue中给当前页面传参并重新加载：
vue路由携带参数跳转页面刷新数据不丢失
qq_33911541的博客
03-29 5831
总结可以实现刷新数据不丢失，但是上一个页面所携带参数会暴露在地址栏，影响安全性。
vue刷新当前页面
hyduan_h5的博客
01-12 1702
我们经常遇到此种情形，当新增编辑完成后，需要重新刷新页面数据，重新调用接口较多时，挨个调用过于繁琐；
vue 跳转本页面并增加参数(携带原有参数)
Erek的前端博客；
06-15 375
vue 跳转本页面并增加参数(携带原有参数)
vue项目三种方式刷新当前页面（重载当前页面数据）
Pgy121的博客
06-23 3348
一、this.$router.go(0) 相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好 二、location.reload() 这种也是一样，画面一闪，体验不是很好，相当于页面刷新 推荐解决方法： 三、用provide / inject 组合 原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效 在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。 &
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。 首先，Vue提供了`...
vue项目刷新当前页面的三种方法
10-17
通常，当用户进行一些操作（如删除、增加记录、表单提交等）之后，开发者需要让当前页面重新加载以显示最新状态，本文将详细介绍在Vue项目中实现页面刷新的三种方法。 首先，传统的刷新页面的方式是使用JavaScript...
vue单页面实现当前页面刷新或跳转时提示保存
10-17
为了防止这类问题发生，可以在表单提交之前对用户进行提示，确认是否真的想要离开当前页面。这一功能可以通过Vue Router提供的路由守卫来实现。 首先，Vue Router提供了三种不同层级的路由守卫： 1. 全局守卫：作用...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
vue公共方法传参，实时刷新数据
and_life的博客
05-09 247
发送界面// 获取点击事件},接受界面：},cont(){},watch: {},cont(){},store/index.js界面:conststore= newVuex.Store({// 定义状态state: {},},
Vue中刷新页面的四种方法
2301_76510083的博客
03-11 2081
vue中刷新页面的四种方法
【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数
m0_46470372的博客
04-04 2637
【代码】【Vue-Router】不跳转的情况下为路由(当前页面)添加query参数。
Vue下已有请求参数对象追加动态可变参数
偏执的博客
04-22 1054
/** 搜索按钮操作 */ handleQuery() { //获取下拉选择搜索的类型和输入的值 console.log(this.queryMsg); console.log(this.select); var params = { enterpriseid: "5", groupid: this.groupId, groups: this.groupId, }; //这句是..
vue 刷新当前页面，并重新加载页面数据
06-08
可以通过以下两种方式来刷新当前页面，并重新加载页面数据： 1. 使用 location.reload() 方法来刷新当前页面，代码如下...其中，$router 是 Vue Router 实例，通过 go(0) 方法可以刷新当前页面，并重新加载页面数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值