How to use Vue-Router patterns and hooks (detailed tutorial)-JS Tutorial-php.cn

How to use Vue-Router patterns and hooks (detailed tutorial)

亚连

Release： 2018-06-02 17:42:19

Original

1791 people have browsed it

This article mainly introduces the usage of Vue-Router mode and hooks. Now I will share it with you and give you a reference.

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

Mode

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

const router = new VueRouter({
　　　mode: &#39;history&#39;, // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

Copy after login

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

##hashUse Simple, no need for background supportExists in the form of hash in the URL and will not be transmitted to the backgroundhistoryThe address is clear and easy to understand and the background Processing requires background cooperation

Mode	Advantages	Disadvantages

The hash mode is a url to the background, because the hash value in the address will not be transmitted to the background, so Just do a mapping of the root address on the server side.

The final routing of the history mode is reflected in the pathname of the URL. This part will be transmitted to the server, so the server needs to map each possible path value accordingly. Or use fuzzy matching for mapping.

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

404 route definition

Since the router itself is matched from top to bottom, if a matching route is found earlier, it will jump. Therefore, you can directly add the 404 route at the end, as follows

let routerConfig = [{
  path: &#39;/pages&#39;,
  component: App,
  children: [{
    path: &#39;demo/step1/list&#39;,
    component: coupon,
    name: &#39;coupon-list&#39;,
    meta: {
      title: &#39;红包&#39;
    }
  }]
}, {
  path: &#39;*&#39;,
  component: NotFound,
  name: &#39;notfound&#39;,
  meta: {
    title: &#39;404-页面丢了&#39;
  }
}]

Copy after login

When the previous match cannot be found, * represents all, which means they all point to the 404 page

Routing hook

Routing hooks are mainly defined for users to perform some special processing when routing changes. Damn. . What a mouthful.

Generally speaking, Vue provides three major types of hooks

1, global hooks

2, hooks exclusive to a certain route
3, In-component hooks

Global hooks

As the name suggests, global hooks are used globally and are used as follows

const router = new VueRouter({
  mode: &#39;history&#39;,
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || &#39;demo&#39;
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

Copy after login

Exclusive hooks for a certain route

As mentioned, it is used separately for a certain route, which is essentially the same as the hook in the subsequent component. They all refer to a specific 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: &#39;/foo&#39;,
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

Copy after login

Hooks within the component

First look at the official definition:

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

beforeRouteEnter
beforeRouteUpdate (new in 2.2)
beforeRouteLeave

Routing component! Routing component! Routing component! Important things are said three times. Everyone must pay attention to the "routing component" mentioned here, and the routing component! == component, routing component! == component, routing component! == Components! I never paid attention to this before, and then I foolishly adjusted the hook function in the subcomponent and found that it was useless. . .

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

Routing components: components directly defined at the component in the router

That is to say, components other than the entry vue file defined in the router do not have hook functions, so there is no need to use them. . But if you use it, no error will be reported, it will just be unresponsive. (I wanted to draw a picture, but I’m too lazy... Just understand it yourself, it’s easy to understand)

Let’s look back at how to use the hook in the route. It’s very simple and Data and method level methods

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

Copy after login

Three routing hooks involve three parameters. Let’s go directly to the official introduction here

to: Route: About to Entering target route object
from: Route: Route that the current navigation is leaving
next: Function: This method must be called resolve this hook. The execution effect depends on the calling parameters of the next method.
next(): Proceed to the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
next(false): Interrupt current navigation. If the browser's URL changes (perhaps manually by the user or by the browser's back button), the URL address will be reset to the address corresponding to the from route.
next(‘/’) or next({ path: ‘/’ }): Jump to a different address. The current navigation is interrupted and a new navigation is started.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to replace node elements with jQuery

Servlet3.0 interacts with pure javascript through Ajax Detailed example explanation

Instance code of tree-shaped dish implemented by vue

The above is the detailed content of How to use Vue-Router patterns and hooks (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!