溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue通過路由實現(xiàn)頁面刷新的方法

發(fā)布時間:2020-08-25 16:36:19 來源:腳本之家 閱讀:115 作者:陌上寒 欄目:web開發(fā)

vue 開發(fā)微信商城項目,

需求如下:

購物車頁面跳轉(zhuǎn)到詳情頁,購物車頁面包含了多個組件,點擊結(jié)算跳轉(zhuǎn)到訂單頁面,從訂單返回時,購物車頁面沒有刷新,由于購物車組件之間通過bus實現(xiàn)事件傳遞,頁面跳轉(zhuǎn)(非物理返回)無法觸發(fā)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()
 },

同樣的,物理返回時無法觸發(fā)購物車的created方法,則無法觸發(fā)bus的$on方法

歸根結(jié)底,物理返回時刷新頁面則可以處理此問題

思路一

  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'
    }
   })

頁面跳轉(zhuǎn)前先通過路由replace到當前頁,再跳轉(zhuǎn)到訂單頁面,返回可以自動刷新了,這個方法并不理想,如果您有更好的方法,歡迎分享

有專門的方法處理此問題,在購物車頁面,添加如下代碼即可

 // 銷毀組件,返回刷新
 deactivated() {
  this.$destroy()
 },

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI