vue通过路由实现页面刷新的方法
更新时间：2018年01月25日 10:49:34 作者：陌上寒
本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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()
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue操作下拉选择器获取选择的数据的id方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了element-vue实现网页锁屏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
为了解决加载组件中出现的报错、超时、状态展示等问题,可以使用 Vue 3 提供的异步组件（Async Components）,它对于加载过程做了更细致的控制,这篇文章主要介绍了Vue 3 进阶用法之异步组件,需要的朋友可以参考下2024-04-04
这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue中 $emit的用法，通过实例代码给大家介绍了子组件和父组件的相关知识，需要的朋友参考下吧2018-04-04
关于element-ui select 下拉框位置错乱问题解决
这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue-loader 是 Webpack 的加载模块，它使我们可以用 Vue 文件格式编写单文件组件。这篇文章主要介绍了Vue.js的高级面试题以及答案,需要的朋友可以参考下2020-01-01
在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的2022-11-11
最新评论