您好,登錄后才能下訂單哦!
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() },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。