Application navigation needs to be “guarded”

In this process, we actually have many opportunities to do something about this behavior.

For example: Xiao Ming is going to grandma’s house from home. You can break his leg and send him home on the way, so that you can stop him from going to grandma’s house.

Ming going to grandma’s is navigation, and you’re the navigation guard.

  • Global front guard

You can register a global front-guard using router.beforeeach:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
Copy the code

When a navigation starts, the global front-guard is called in the order of registration.

The guard is invoked asynchronously and the navigation is in the last layer.

new Promise((resolve, reject) => {
    resolve('First global front-guard')
}.then(() => {
    return 'Second global front-guard'
}.then(() => {
    ...
}.then(() => {
    console.log('Navigation has finally begun.'// Navigation is in the last layer})Copy the code

Each guard method takes three arguments (the guards that follow are pretty much the same) :

1. To: Route: the destination object to be entered (such as grandma’s house)

E.g. The Route you are about to leave (e.g. Xiao Ming’s house).

Next: Function: This method must be called to transfer control to the next guard, depending on the next method’s parameters.

  • Next (): Enters the next guard. If all guards are executed. The state of the navigation is confirmed.

  • Next (false): Interrupts current navigation. If the browser URL changes (either manually by the user or by the browser back button), the URL is reset to the address corresponding to the FROM route.

  • Next (‘/’) or next({path: ‘/’}): jumps to a different address. The current navigation is interrupted and a new navigation is performed (Ming has a broken leg and is sent home). You can pass any location object to next, and you can set options like replace: True, name: ‘home’, and any options used in router-link’s to prop or router.push.

  • Next (error): (2.4.0+) If the argument passed to Next is an error instance, the navigation is terminated and the error is passed to the callback registered with router.onerror ().

    Never use next twice; it can lead to misunderstandings.

  • Global parsing guard

This is similar to router.beforeeach, but it is always placed last to execute.

  • Global post-hook

Navigation has confirmed that Ming has arrived at grandma’s house, and you broke his leg and he is also at grandma’s house.

AfterEach ((to, from) => {router. AfterEach ((to, from) => {router. })Copy the code

  • Route exclusive guard

Guards written inside the route

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

  • Guards within components

  1. beforeRouteEnter
  2. BeforeRouteUpdate (2.2 New)
  3. beforeRouteLeave
const Foo = { template: `... BeforeRouteEnter (to, from, next) { Cannot get component instance 'this'}, beforeRouteUpdate (to, from, next) {// Called when the current route changes but the component is being reused // For example, for a path with dynamic parameters /foo/:id, When jumping between /foo/1 and /foo/2, // renders the same foo component, so the component instance is reused. And the hook will be called in that case. // You can access component instance 'this', generally used for data retrieval. }, beforeRouteLeave (to, from, next) {// Navigate away from the component's corresponding route // Can access the component instance 'this'}}Copy the code

  • Whole course of navigation

    • Navigation is triggered.
    • Call the beforeRouteLeave guard in the component preparing to leave.
    • Call the global beforeEach guard.
    • Call the beforeRouteUpdate guard (2.2+) in the reused component. (If your component is reusable)
    • Call beforeEnter in routing configuration.
    • Parse incoming components.
    • Call beforeRouteEnter in the incoming component.
    • Call the global beforeResolve guard (2.5+).
    • Navigation confirmed.
    • Call the global afterEach hook.
    • Trigger a DOM update.
    • Call the callback passed to Next in the beforeRouteEnter guard with the created instance.