Very practical vue navigation hook

Navigation hook

(Translator: "Navigation" means that the route is changing.)

As its name suggests, the navigation hooks provided by vue-router are mainly used to intercept navigation and make it jump or cancel. There are several ways to execute hooks when route navigation occurs: global, individual route exclusive, or component-level.

Global hook

You can register a global before hook using router. beforeEach:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

When a navigation is triggered, the global before hooks are called in the order in which they were created. Hooks are parsed asynchronously, and navigation is waiting until all hooks resolve are finished.

Each hook method takes 3 parameters:

to: Route: Target routing object to be entered

from: Route: The route currently navigating is leaving

next: Function: 1 Must call this method to resolve this hook. The execution effect depends on the call parameters of next method.

next (): Proceed to the next 1 hook in the pipe. If all hooks are executed, the navigation status is confirmed (confirmed).

next (false): Interrupts the current navigation. If the browser's URL changes (either manually by the user or the browser back button), the URL address is reset to the address corresponding to the from route.

next ('/') or next ({path: '/'}): Jump to a different address. The current navigation is interrupted, and then a new navigation is performed.

Make sure to call the next method, otherwise the hook will not be resolved.

You can also register a global after hook, but unlike the before hook, the after hook has no next method and cannot change navigation:

router.afterEach(route => {
 // ...
})

Hook exclusive to a route

You can define the beforeEnter hook directly on the routing configuration:

const router = new VueRouter({
 routes: [
 {
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
  // ...
  }
 }
 ]
})

The method parameters of these hooks are identical to those of global before hooks.

Hook within assembly

Finally, you can use beforeRouteEnter and beforeRouteLeave to define routing navigation hooks directly within the routing component.

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 //  When rendering the corresponding route of the component, it is  confirm  Pre-invocation 
 //  No! Yes! Getting Component Instances  `this`
 //  Because the component instance has not been created before the hook executes 
 },
 beforeRouteLeave (to, from, next) {
 //  Called when navigating away from the corresponding route of the component 
 //  You can access component instances  `this`
 }
}

The beforeRouteEnter hook cannot access the this because the hook is invoked before navigation confirmation, so the upcoming new component has not been created.

However, you can access the component instance by passing a callback to next. Executes the callback when the navigation is confirmed and takes the component instance as an argument to the callback method.

beforeRouteEnter (to, from, next) {
 next(vm => {
 //  Pass  `vm`  Access component instances 
 })
}

You can access this directly from beforeRouteLeave. This leave hook is usually used to prevent users from leaving suddenly before saving changes. Navigation can be canceled through next (false).

When doing the project, the requirement is to pop up a box for the customer when closing the page to increase the customer's stay time. Recently, I looked at this hook and found it very good.

This article has been sorted into "Vue. js front-end component learning tutorial", welcome everyone to learn and read.

For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.