vue通过路由实现页面刷新
2024-08-30 19:02:13
vue 开发微信商城项目,
需求如下:
购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法
beforeDestroy() {
this.$root.Bus.$off('judge')
this.$root.Bus.$off('refreshDetail')
this.$root.Bus.$off('clearAll')
this.$root.Bus.$off('upDataCart')
},
无奈,通过beforeRouteLeave来销毁
beforeRouteLeave(to, from, next) {
this.$root.Bus.$off('judge')
this.$root.Bus.$off('refreshDetail')
this.$root.Bus.$off('clearAll')
this.$root.Bus.$off('upDataCart')
next()
},
同样的,物理返回时无法触发购物车的created方法,则无法触发bus的$on方法
归根结底,物理返回时刷新页面则可以处理此问题
思路一
beforeRouteEnter(to, from, next) {
next(()=>{
window.location.reload()
})
},
此方法理论貌似可行,但是页面会狂刷不止,
最后采用了思路二,貌似是一个很low的方法,但是解决了实际问题
this.$router.replace({ name: 'cart' })// 处理返回刷新问题
this.$router.push({
path: '/order/order_sure',
query: {
sku: sku_str,
cart: 'cart'
}
})
页面跳转前先通过路由replace到当前页,再跳转到订单页面,返回可以自动刷新了,
这个方法并不理想,如果您有更好的方法,欢迎分享
有专门的方法处理此问题,在购物车页面,添加如下代码即可
// 销毁组件,返回刷新
deactivated() {
this.$destroy()
},
原文地址:https://segmentfault.com/a/1190000012962470
最新文章
- ";飞机大战";游戏_Java实现_详细注释
- 【bzoj1014】 JSOI2008—火星人prefix
- Python之路【第十一篇续】前端初识之CSS
- LESS 学习记录(简单入门)
- css 层的嵌套
- eclipse-统计代码行数
- poj_2674 弹性碰撞
- javascript格式化指定的日期对象
- redis: 6379端口下set值时出现 CLUSTERDOWN The cluster is down
- Java开源运行分析工具(转)
- Activity的LaunchMode情景思考
- Python dict 按键和值排序
- ES6中的模块
- [NOI2017]游戏
- 【转】Kali更新源
- [转]Ubuntu 常用解压与压缩命令
- Linux中systemctl命令详细介绍
- 实现一个 Virtual DOM 算法
- 【scala】 scala 类 (五)
- Bagging和Boosting的概念与区别
热门文章
- 2、深入学习基本结构——CNN
- 【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) A】Packets
- Eclipse中项目去除Js验证
- Caffe solver.prototxt学习
- surface 更新提示
- React实现单例组件
- 立即执行函数与Function
- Win8 Windows Defender default behaviour
- Stack Overflow大揭密:哪一种程序员工资最高?
- Chrome添加Unity本地文档引擎