Difference between beforeRouteUpdate and viewing "$ route" - Vue.js?

Question

As we know, in order to respond to parameter changes in the same component, we use a beforeRouteUpdate hook or observe a $route .

view $ route:

 const User = { template: '...', watch: { '$route' (to, from) { // react to route changes... } } } 

beforeRouteUpdate:

 const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... next() } } 

What is the difference between the two? if both are the same, then why beforeRouteUpdate vue router introduce beforeRouteUpdate ?

Answer 1

From the documentation on beforeRouteUpdate :

when the route that this component displays has changed, but this component is reused in the new route. For example, for a route with dynamic parameters /foo/:id , when we move between /foo/1 and /foo/2 , the same instance of the Foo component will be reused, and this hook will be called when this happens.

The documentation is admittedly unclear that the call invokes the call before the value of the $route object really changes. That the difference between this navigation hook and setting the observer to $route , which is called after the value of $route , has changed.

Using the protective screen beforeRouteUpdate , you can determine whether you want to prohibit changing the route (without calling next() ) or switch to another route completely (passing a different route value, for example next('/foo') , next({ name: 'foo' }) , etc.).

Here is an example fiddle that shows when these functions are called.

Answer 2

As @thanksd said, beforeRouteUpdate is like a guard. While browsing, you cannot prevent the route from starting, but with beforeRouteUpdate you can do it with the next function. for example, you can wait until your data is received, and then go to the component.

For more information, see the vue-router documentation Extracting data .