Shulou(Shulou.com)06/03 Report--

This article is about how to solve the refresh problem of different parameters of the same route in Vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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 map relationship'/ form/:type'// current page routing / form/shop1this.$router.push ({name: 'form', params: {type:' shop2'})

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

For simple data updates, we can directly monitor the routing parameters and retrieve the initialization data of the route.

However, in cases where there are many subcomponents that need to be initialized or reset, it is still necessary to re-execute the life cycle of the component.

There are three ways to solve this situation:

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

/ / Global navigation guard router.beforeEach ((to, from, next) = > {if (to.name = from.name & & to.params.type! = = from.params.type) {next ({name: 'empty', query: {toPath: to.fullPath})} else {next ()}) / / Intermediate transition Route let toPath = this.$route.query.toPathif (this.toPath) {this.$router.push ({path: this.toPath})}

two。 Re-render the current page components using v-if

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

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

3. Force refresh using the key value bound by the vue document component

The vue documentation shows that when you need

Completely triggers the lifecycle hook of the component

Trigger transition

You can use to update the key value of the component binding to complete a more detailed description

This binds the value associated with the routing parameter directly to the component

Taken together, the third method is the simplest and is recommended.

Thank you for reading! This is the end of this article on "how to solve the refresh problem of different parameters of the same route in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.