在vue中使用路由實現頁面刷新

本篇文章主要介紹了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()
 },

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

PHP閉包和匿名函數（詳細教學）

在Vue元件中有關自訂事件（詳細教學）

在微信小程式中如何使用三級連動選擇器

以上是在vue中使用路由實現頁面刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！