Vue navigation guard to my own understanding is listening page to access, modify, and leave the function. Each guard takes three arguments
to: Route: about to enter the target routing objects
from: Route: The current route navigation was about to leave
next: Function: be sure to call this method to resolve this hook. Implementation of the results depend on the method call parameters next.
next (): the next hook pipeline. If all the hook either finished, the status of navigation is confirmed (acknowledged).
next (false): interrupt the current navigation. If the browser's URL has changed (manually by the user or may be the browser back button), then it will be reset to a URL address from an address corresponding to the route.
next ( '/') or next ({path: '/'}): jump to a different address. The current navigation is interrupted, then a new navigation.
next (error): (2.4.0+) if the parameter is a next incoming Error instance, the navigation will be terminated and the error will be passed to router.onError () registered callbacks.
Make sure to call the next method, otherwise the hook will not be resolved.
Test1:
<template> <div> test1 <el-button @click="test2">跳转</el-button> </div> </template> <script> export default { name: "Test1", methods: { test2() { this.$router.push({name: "test2", query:{type: false}}) } }, beforeRouteEnter (to, from, Next) { the console.log ( //" ********************************************************* Test1 **** ************** the Enter " ); the console.log ( ' to ' , to); the console.log ( ' from ' , from); the console.log ( ' Next ' , Next); Next (VM => { // because when the hook before the execution component instance has not been created // VM is the current instance of the component corresponding to the above this, so that in the next method where you can put to use this as the vm. the console.log (vm); // instance current component }); }, beforeRouteUpdate (to, from , next) { In the current route to change, but the call when the assembly is multiplexed // },For a path with dynamic parameter / good /: id, the time between jumps / 2 / good / 1 and / good, // since renders the same good components, thus the component instances are multiplexed. And this hook will be called in this case. // can access the component instance this` ` console.log ( " **************** Update Test1 ******* *********** " ); the console.log ( the this , ' the Update ' ); // current component instance the console.log ( ' to ' , to); the console.log ( ' from ' , from); the console.log ( ' Next ' , Next ); Next (); beforeRouteLeave (to, from, Next) { //Called when the navigation route of the assembly away from the corresponding // access component instance this` ` the console.log ( " ********************************************************* the Leave Test1 **** ***** *************************************** " ); the console.log ( the this , ' the Leave ' ); // current component instance the console.log ( ' to ' , to); the console.log ( ' from ' , from); the console.log ( ' Next ' , Next); Next (); } } </ Script > < style scoped > </style>
Test2:
<template> <div> test2 </div> </template> <script> export default { name: "Test2", beforeRouteEnter(to, from, next) { console.log("****************Test2*********Enter*********"); console.log(this, 'beforeRouteEnter'); // undefined console.log('to', to); the console.log ( ' from ' , from); the console.log ( ' Next ' , Next); (Next vm => { // because when the hook before the execution component instance has not been created // instance vm is the current component this corresponds to the upper, so the next method where you can put to use this as the vm. the console.log (vm); // instance current component }); }, beforeRouteUpdate (to, from, next) { / / in the current route to change, but the call when the assembly is multiplexed // for a path with a dynamic parameter / good /: id, between / good / 1 and / good / 2 when the jump, // since It renders the same good components, thus the component instances are multiplexed. And this hook will be called in this case. // can access the component instance this` ` console.log ( "Test2 *************************************** the Update *************************************** **************** " ); the console.log ( the this , ' beforeRouteUpdate ' ); // current component instance the console.log ( ' to ' , to); the console.log ( ' from ' , from); the console.log ( ' Next ' , Next); Next (); }, beforeRouteLeave (to, from, Next) { // called when the navigation route of the assembly away from the corresponding // access component instance this` ` the console.log ( " ********************************************************* Test2 ***** the Leave ********* **** "); console.log(this, 'beforeRouteLeave'); //当前组件实例 console.log('to', to); console.log('from', from); console.log('next', next); next(); } } </script> <style scoped> </style>
The first is the first time into the Test1
When the home can be seen as the time of entry, beforeRouteEnter method
- to show that the current route,
- from the display name is null, path is "/"
When leaving the Test1 Test2 page to enter the page will first call the beforeRouteLeave method Test1 page, and then call beforeRouteEnter method of Test2
beforeRouteLeave中
- It is destined to display routing parameters have passed test2
- from the display of the route is about to leave test1
beforeRouteEnter中
- to which the display page is present and has transmission parameters test2
- from shows on a page test1
When leaving the page Test1 Test2 return to first call beforeRouteLeave method Test2 page, and then call beforeRouteEnter method of Test1
beforeRouteLeave中
- We are going to show the route test1
- from the display of the route is about to leave and there are arguments passed test2
beforeRouteEnter中
This page is to display the test1
from the previous page shows the parameters passed test2 have
this we can conclude
- to: Route: about to enter the target routing objects
- from: Route: The current route navigation was about to leave
It is the intention of the two parameters, we can understand
When beforeRouteEnter method: to be understood as the current page, from which page is from, if the name is Home is null, path is "/"
When beforeRouteLeave method: the meaning of the two parameters can be the same with the official website of significance