A brief discussion on the refreshing problem of different parameters of the same route of Vue

We will encounter such a problem when developing spa applications using vue and vue-router.

When the page jumps, the component itself does not change:

//Route mapping relationship '/form/:type'// Current page routing /form/shop1this.$({ name: 'form', params: { type: 'shop2' })

At this time, after we perform routing jump, we will find that the component has not been refreshed, and the data of the previous routing component has been retained, which is not the effect we want.

For simple data updates, we can directly listen to the routing parameters and re-get the route's initialization data.
However, for many subcomponents that need to be initialized or reset, it is still necessary to re-execute the component's life cycle.

There are three ways to solve this situation:

1. Replace the intermediate route for jumps to the same route page, register beforeEach global guard on the router for intercepting, jump to an intermediate route (such as empty), and then jump from the intermediate transition route to the route to the route to go.

// Global Navigation Guard((to, from, next) => {
 if ( ===  &&  !== ) {
  next({ name: 'empty', query: { toPath:  } })
 } else {
  next()
 }
})

// Intermediate transition routinglet toPath = this.$
if () {
 this.$({ path:  })
}

2. Re-render the current page component using v-if

// html part<div>
 <router-view v-if="showRouterView"/>
</div>

// script partexport default {
 data () {
  return {
   isRouterAlive: true
  }
 },
 methods: {
  reload () {
    = false
   this.$nextTick(() => ( = true))
  } 
 }
}

In this way, register the method to the following component, and directly call the reload method for the component you want to refresh.

3. Use the key value bound by the vue document component to force refresh

vue documentation explains when you need

• Trigger the component's life cycle hook intact
• Trigger transition

When you update the key value bound by the component, you can complete itMore detailed description

This way, you can directly bind the value associated with the routing parameters to the component

<MyComponent :key="routeParams" />

Overall, the third method is the simplest and recommended.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.