This is the 8th day of my participation in the August Text Challenge.More challenges in August

After getting stuck in a business, I went to official documents and other articles to learn about a wave of vue-Router routing guards. The first error: used in a component, but not registered in the router.js file. It is not a routing component

const router = new VueRouter({
    mode: 'history'.routes: [
        / / directory
        {
            name: 'directory'.path: resolvePath('directory'),
            component: () = > import('.. /views/directory'),}});Copy the code

Home.vue

beforeRouteEnter(to, from, next) {
    document.title = 'Here's the title.' 
    next();
}
Copy the code

When I found the problem, I needed to use beforeRouteEnter in directory. Vue

You can define the following route navigators directly within the routing component:

Second error: use this\ in beforeRouteEnter

directory.vue

beforeRouteEnter(to, from, next) {
    document.title = 'Here's the title.' 
    this.start = new Date(a)// Error reported!!
    next();
}
Copy the code

Then I saw it again on the official website

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

True to its name, vue-Router provides a navigation guard that is used to guard navigation by jumping or cancelling. There are several opportunities for embedding route navigation: global, single route proprietary, or component level.

Remember that changes in parameters or queries do not trigger entry/exit navigational guards. You can respond to these changes by observing the $Route object, or by using the beforeRouteUpdate component internal guard.

There are several forms beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeRouteEnter

First, it can be used in routing files

Global:

BeforeEach, beforeResolve, afterEach

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

For global operations I might do something like this: give a 404 page when jumping to a route that doesn’t exist

router.beforeEach((to, from, next) = > { 
    to.matched.length === 0 ? next({ 
        path: '/ 404'.replace: true
     }) : next()
 })
Copy the code

Exclusive guard: beforeEnter

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

Kit:

BeforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

beforeRouteEnter(to, from, next) {
    next()
}
beforeRouteUpdate(to, from, next) {
    next()
}
beforeRouteLeave(to, from, next) {
    next()
}
Copy the code

The use of beforeRouteUpdate is to trigger this guard when we hop to different pages using the same routing component

“To” is where to go, “to get to,” from “where to come from

As I wrote above, next() must be executed every time to ensure that the next function is called exactly once in any given navigator. It can occur more than once, but only if all logical paths do not overlap, otherwise the hook will never be parsed or an error reported

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.