页面回退时原页面刷新

原创 于 2023-06-30 10:55:18 发布 · 994 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

当使用`this.$router.go(-1)`回退至上一页面时，若需刷新页面且不触发created事件，可采用监听路由变化的方法。在上级页面设置监听器，一旦路由改变，便刷新表格内容，确保数据更新。

使用this.$router.go(-1)回退页面时，无法携带参数，但需要上级页面刷新，并且上级页面的created并不会再度触发时，采用监听

在上级页面添加监听，这里只要路由发生跳转，则会触发

然后在methods中刷新表格的内容即可

 

 

Dolores_zsq
关注
Vue 路由回退页面不刷新？深度剖析及实用解决方案汇总
weimengen的博客
11-27 3599
本文聚焦 Vue 路由跳转回退后页面不刷新问题，深入剖析其产生原因，详细阐述包括监听路由变化、利用多种钩子函数、借助 provide/inject 组合及 Vuex 状态管理等在内的多种实用解决方案，并强调需依项目需求灵活选用，同时注重数据更新时的性能优化，以提升用户体验，助力开发者构建流畅 Vue 应用。
精选资源
解决ios微信页面回退不刷新的问题
01-05
在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { ...以上这篇解决ios微信页面回退不刷新的问题就是小编分享给大家的全部内容了，
vue项目使用$router.go(-1)返回时刷新原来的界面操作
10-15
主要介绍了vue项目使用$router.go(-1)返回时刷新原来的界面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由跳转页面不刷新、this.$router.go(-1)不生效
黑玫瑰
07-12 8720
vue项目中遇见了这样一个问题：使用this.$router.go(-1)回到上一页，路由改变了，但是页面展示还是停留在当前页面，需要手动刷新才能渲染跳转后的页面。router-view 如下： 一般情况用到上面这种写法就能解决问题了，但是我这里还是不生效。然后我就想到了如下方法：解决思路：在钩子时，使用存储from.path；然后在点击返回的时候使用this.$router.push代码：...
vue项目使用$router.go(-1)刷新原来界面
花开富贵的博客
05-27 1万+
1.问题： 我们常常需要使用$router.go(-1)返回之前的页面，但是却发现， 之前的界面，保持着上次跳转的状态，比如说：弹框未关闭,状态未更新之类的等等 2.原因： 使用$router.go(-1)返回，之前的数据都保留，并未刷新原来的界面 3.解决方案： 在原页面watch中，对router进行监控，当router发生变化时，执行初始化界面方法： watch: { '$route' () { this._initData();//我的初始化方法 } }, 或
Keep-Alive组件的使用
aeipyuan
06-23 401
使用场景 组件切换时缓存之前加载的状态不会被销毁，避免反复渲染同时减少网络请求 使用方式 使用keep-alive中的属性include或exclude,根据组件name判断 <keep-alive include="test1"><!-- 仅对name为test1的组件缓存 --> <router-view></router-view> </keep-alive> 在路由中配置属性标识是否缓存 { path: '/te
vue2.0页面前进刷新回退不刷新的实现方法
10-18
在Vue 2.0中，有时我们需要实现页面前进时刷新数据，而回退时不重新加载，以提供更好的用户体验。这个功能在单页面应用（SPA）中尤为常见，尤其是在导航历史管理和数据缓存的场景下。以下是一种实现这一功能的方法：...
Ajax回退刷新页面问题的解决办法
10-22
在早期，为了解决这个问题，一些浏览器开始支持onhashchange事件，通过定时检查URL中的哈希值（#）变化来模拟页面回退和前进。但这种方法对不支持该事件的浏览器不友好，且对搜索引擎优化SEO来说也不是很友好。 ...
vue router带参数页面刷新或回退参数消失的解决方法
10-17
为了解决使用params传递参数时，页面刷新或回退参数消失的问题，可以采用以下几种方法： 方法一：在组件的`created`或`mounted`生命周期钩子中，从localStorage中取出之前存储的参数并赋值给data中的变量。当组件...
浏览器回退按钮强制刷新
lou_hy2016的博客
10-20 1480
关于返回页面，页面不刷新 js解决方法如下： if(window.name != "bencalie"){     location.reload();     window.name = "bencalie"; } else{     window.name = ""; } 转载地址：http://lz881228.blog.163.com/blog
vue返回上一页效果(this.$router.go、)
wwf1225的博客
11-25 2159
vue返回上一页效果(this.$router.go、) 如何使用点击方式控制当前页返回到上一个路由页面： 查阅相关资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下: 1.在当前页面添加返回按钮 <!--返回按钮--> <div class="backTo" v-show="isShow"...
window.history.go(-1)回退未刷新问题
日常笔记/总结/系列知识梳理
07-28 5682
采用window.history.go(-1)时，页面未刷新，使用以下方法解决。
Vue this.$router.go(-1)；刷新问题
weixin_44276396的博客
10-27 3342
Vue this.$router.go(-1);刷新问题 watch: { ‘$route’() { this.getList();//我的初始化方法 } }, 想刷新哪些数据就调用哪个方法
关于微信“被返回页”在被返回时自动刷新
weixin_30445169的博客
07-26 190
网上有很多这些文章，但我觉得没一篇真正解决这个问题，倒是能给人一个解决方案的思路，对，就是posState事件。要解决这个问题也不难，使用history的replaceState属性替换当前网页链接（其实作用是在不增加history长度的基础上，仍然使用当前网面链接不能使用popState,因为它的作用是增加了history的长度，后退时会出错，往往跳不出循环）。完整代码如下： $(fu...
解决$router.go(-1)返回上一层页面不刷新页面问题
u011280778的博客
10-06 8111
原因：页面没有跳转过去，但网址已经跳转过去了，这个原因是因为他没有进行缓存，所以页面没有进行及时的渲染。 方案一 //先在router/index.js中添加路由元信息，设置需要缓存的页面 routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: false, //此组件不需要被缓存 } },{
解决返回上一级this.$router.go(-1)页面不刷新的问题
qq_41442428的博客
02-17 1万+
需求：给你一维数组，里面是通过父节点的id与子元素挂钩。 dataList: [ { “gid”: 1, “parentId”: null, “name”: “评价0”, “siblingId”: 0 }, { “gid”: 2, “parentId”: null, “name”: “评价1”, “siblingId”: 1 }, { “gid”: 3, “parentId”: null, “na...
vue项目使用$router.go(-1)返回时刷新原来的界面
热门推荐
line
11-18 4万+
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框 解决方法1： 不要使用...
Vue 中使用 router-link 后，URL 变化但是页面不刷新，Vue获取java后台传过来的值
qq_33922980的博客
12-02 3359
一.遇到的问题:Vue 中使用 router-link 后，URL 变化但是页面不刷新 今天在项目中遇到了这样的问题: 当使用 router-link 跳转后， 想要返回，浏览器中的地址虽然改变了，但是页面却并没有刷新 解决的办法 1.我最原始的使用了刷新页面的办法，在vue中使用了this.$router.go(-1) 返回上一级，然后使用this.$router.go(0) ，使用了这种方...
jsp 回退刷新当前页面
最新发布
01-07
### JSP 中实现页面回退后自动刷新 为了实现在 JSP 应用程序中点击返回按钮回到上一页并刷新该页的功能，可以通过 JavaScript 和 HTTP 头部设置相结合的方式完成。 #### 使用 JavaScript 控制历史记录和刷新行为 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值