Vue refreshes the vue page through routing

Vue refreshes the vue page through routing

Vue development mall project,

The requirements are as follows:

The shopping cart page jumps to the details page. The shopping cart page contains multiple components. Click settlement to go to the order page. When the order is returned, the shopping cart page is not refreshed. Because the shopping cart components are transmitted through the bus, the beforeDestroy method cannot be triggered when a page Jump (non-physical return) occurs.

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

Helpless, destroy 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, when the physical return fails to trigger the created method of the shopping cart, the $ on method of the bus cannot be triggered.

In the final analysis, refresh the page when the physical returns can solve this problem.

Train of Thought 1

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

This method seems to be feasible in theory, but the page will be overwhelmed,

Finally, I used train of thought 2.It seems to be a low method, but it solves the actual problem.

This. $ router. replace ({name: 'cart'}) // refresh returned. this. $ router. push ({path: '/order/order_sure', query: {sku: sku_str, cart: 'cart '}})

The current page is directed to the current page through the route replace before the page Jump to the order page, the return can be automatically refreshed, this method is not ideal, if you have a better way, please share

You can add the following code on the shopping cart page.

// Destroy the component and return the refresh deactivated () {this. $ destroy ()},

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.