Navigation hook
(Translator: "Navigation" means that the route is changing.)
As its name suggests, the navigation hook provided by vue-router is mainly used to intercept navigation and allow it to complete jumps or cancel. There are several ways to execute hooks when routing navigation occurs: global, single route-only, or component-level.
Global hook
You can register a global before hook using:
const router = new VueRouter({ ... })
((to, from, next) => {
// ...
})
When a navigation is triggered, the global before hook is called in the order of creation. Hooks are asynchronously parsed and executed, and the navigation is waiting until all hooks resolve.
Each hook method receives three parameters:
to: Route:The target to be entered Routing object
from: Route: The route that the current navigation is about to leave
next: Function:Be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.
next(): Perform the next hook in the pipe. If all hooks are executed, the navigation status is confirmed.
next(false): Interrupt the current navigation. If the browser's URL has changed (maybe it's manual or the browser's back button), the URL address will be reset to the corresponding address from route.
next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is performed.
Make sure to call the next method or the hook will not be resolved.
You can also register a global after hook, but it is not like the before hook. The after hook does not have a next method and cannot change the navigation:
(route => {
// ...
})
A hook exclusive to a route
You can directly define the beforeEnter hook on the routing configuration:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
These hooks have the same method parameters as the global before hook.
Hooks inside components
Finally, you can use beforeRouteEnter and beforeRouteLeave to directly define the routing navigation hook within the routing component.
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// Called before rendering the corresponding route of the component is confirmed // No! able! Get component instance `this` // Because the component instance has not been created before the hook is executed },
beforeRouteLeave (to, from, next) {
// Called when navigation leaves the corresponding route of this component // Component instances can be accessed `this` }
}
beforeRouteEnter hook cannot access this because the hook is called before navigation confirmation, so the new component that will be launched has not been created yet.
However, you can access the component instance by passing a callback to next. When the navigation is confirmed, the callback is executed and the component instance is used as a parameter to the callback method.
beforeRouteEnter (to, from, next) {
next(vm => {
// Access component instances through `vm` })
}
You can access this directly in beforeRouteLeave. This leave hook is usually used to prohibit users from leaving suddenly before they have saved the modification. You can cancel the navigation through next(false).
When working on a project, the requirement is to pop up a box to the customer when closing the page to increase the customer's stay time. I recently looked at this hook and found it very good.
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
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.