Vue-Router mode and hook usage

The previous article mainly wrote about the basic use of vuer-router. It can be said that it has solved the problem of food and clothing. Let’s have some afternoon tea.

model

The pattern options in vue-router are mainly defined when router is instantiated, as follows

const router = new VueRouter({
　mode: 'history', // Two types of history and hash   routes: routes // Can be abbreviated as routes})

There are two modes to choose from, history and hash, for a rough comparison,

The hash mode is a url for the background, because the hash value in the address will not be transmitted to the background, so the server can just make a root address mapping.
The final routes in the history mode are reflected in the pathname of the url, which will be transmitted to the server side, so the server needs to map each possible path value accordingly. Or use fuzzy matching to map.

In addition, in history mode, if the backend does not map one-to-one, but matches fuzzyly, then you should pay attention to the situation of 404. At this time, you need to define the 404 page in the front-end router.

404 route definition

Since the match of the router itself is from top to bottom, if the matching route is found in the front, it will jump. Therefore, the route of 404 can be added directly at the end, as follows

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: 'Red envelope'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-The page is lost'
  }
}]

When the previous match cannot be matched, * means everything, which means it all points to page 404

Routing hook

The routing hook is mainly defined by users to perform some special processing when the route changes, and it is ok. . Very difficult to pronounce.

Generally speaking, vue provides three categories of hooks

1. Global hook
2. A hook exclusive to a route
3. Component inner hook

Global hook

As the name suggests, the global hook is used globally, as follows

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

((to, from, next) => {
   =  || 'demo'
  if (! && ) {
     = 
  }
  next()
})

(route => {
})

A route exclusive hook

As said, for a route to be used separately, it is essentially the same as the hook inside the component behind it. They are all specifically referring to a certain route. The difference is that the general definition here is in the router, not in the component. as follows

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

Component inner hook

First, let’s take a look at the official definition:

You can directly define the following routing navigation hooks within the routing component

1. beforeRouteEnter
2. beforeRouteUpdate (2.2 new)
3. beforeRouteLeave

Routing component! Routing component! Routing component! The important thing is said three times. Everyone must pay attention to the "routing component" mentioned here, and the routing component! == Component, routing component! == Component, routing component! == Component! I haven't paid attention to this before, and then I foolishly adjust the hook function in the subcomponent and found that it has been useless. . .

Let’s first look at what is a routing component?

Routing component: directly define the component at the component in the router

In other words, components outside the entry vue file defined in router do not have hook functions, so there is no need to mention using them. But if you use it, you won't report an error, but it just doesn't respond. (I wanted to draw a picture, but I was too lazy... I understand it myself, it's easy to understand)

Let’s look back at how this route is used. It’s very simple to be on par with data and method.

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

All three routing hooks involve three parameters, so let’s introduce them directly here.

1. to: Route: The target to be entered Routing object
2. from: Route: The route that the current navigation is about to leave
3. next: Function: Be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.
4. next(): performs the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
5. next(false): interrupts 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 address corresponding to the route from.
6. next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is performed.

This is basically the end of the pattern and hook. If you need it, you can carefully study the official document. The above are just some understanding of the personal learning process. I hope it will be helpful to everyone's learning and I hope everyone will support me more.