Use routing in vue to refresh the page

This article mainly introduces how Vue implements page refresh through routing. Now I share it with you and give it as a reference.

vue develops a WeChat mall project.

The requirements are as follows:

The shopping cart page jumps to the details page. The shopping cart page contains multiple components. Click checkout to jump to On the order page, when returning from the order, the shopping cart page is not refreshed. Since events are transmitted between shopping cart components through the bus, page jumps (non-physical returns) cannot trigger the beforeDestroy method, and the bus method cannot be destroyed in this method

 beforeDestroy() {
  this.$root.Bus.$off('judge')
  this.$root.Bus.$off('refreshDetail')
  this.$root.Bus.$off('clearAll')
  this.$root.Bus.$off('upDataCart')
 },

Helpless, destroy it through 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()
 },

Similarly, the created method of the shopping cart cannot be triggered when the physical return is made, and the $on method of the bus cannot be triggered.

In the final analysis, the physical return This problem can be solved by refreshing the page from time to time

Idea 1

  beforeRouteEnter(to, from, next) {
   next(()=>{
     window.location.reload()
   })
  },

This method seems feasible in theory, but the page will be refreshed endlessly,

Finally, I adopted the second idea, which seems to be a very low method, but it solves the actual problem

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
   this.$router.push({
    path: '/order/order_sure',
    query: {
     sku: sku_str,
     cart: 'cart'
    }
   })

Before the page jumps, replace it to the current page through routing, then jump to the order page, and return It can be refreshed automatically. This method is not ideal. If you have a better method, please share it

There is a special method to deal with this problem. On the shopping cart page, add the following code

 // 销毁组件，返回刷新
 deactivated() {
  this.$destroy()
 },

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

PHP closures and anonymous functions (detailed tutorial)

About custom events in Vue components (detailed Tutorial)

How to use the three-level linkage selector in WeChat mini program

The above is the detailed content of Use routing in vue to refresh the page. For more information, please follow other related articles on the PHP Chinese website!