Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the difference between afterEach and beforeEach in Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what's the difference between afterEach and beforeEach in Vue?"

Route writing

Routes: [{path:'/ cart', name: 'cart', component: cart, meta: {title: "Shopping cart"} / / for a given web page name}]

The method of routing Jump in vue-router

The first: programmatic navigation

Headset channel / / to is a prop. Specify the path that needs to jump, or you can use v-bind dynamic settings / / tag to render it as a tag. By default, a tag jumps back / / this way of writing will not leave a historical trace, and the fallback key is invalid User// / product/1.

The second kind: functional navigation

/ / suppose I want to jump to the product page with the parameter id / / where list.id is defined as the dynamic value this.$router.push ('. / product/' + list.id) / / string to describe this.$router.push ({name: 'product' Params: {id: list.id}) / / how to describe a named route this.$router.push ({path: `/ product/$ {list.id}`}) / / directly define the method of path similar to the first / / more commonly used jump route / / if it is with query parameter router.push ({path: 'product', query: {id: list.id}}) / product?id=1

This method adds a new record to the history stack, so when the user clicks the browser back button, it goes back to the previous URL.

This method is called internally when you click, so clicking is equivalent to calling router.push (...).

It is worth noting that if path,params is provided, the configuration will not take effect.

There are some other ways.

Router.replace / / it does not add a new record to history, but is the same as its method name-replace the current history record router.go (1) / / take a step forward in the browser record, equal to history.forward () router.go (- 1) / / one step back record, equivalent to history.back () router.go (n) / / browser record forward 3 steps

The basic use is about that much.

There are also named views, routing redirection and so on. Please see the official website.

That's about all the basics.

Now let's talk about the difference between the two navigation guards, afterEach beforeEach.

As the name suggests, the navigation guards provided by vue-router are mainly used to guard navigation by jumping or canceling. There are many opportunities to be implanted in the routing navigation process: global, exclusive to a single route, or component-level.

Keep in mind that changes in parameters or queries do not trigger entry / exit navigation guards.

In the global guard.

BeforeEach Global Front Guard

When a navigation is triggered, the global front guard is called in the order in which it is created.

Each guard method receives three parameters:

To: Route: the destination routing object to be entered

From: Route: the route from which the current navigation is leaving

Next: Function: be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.

Router.beforeEach ((to, from, next) = > {console.log (to); / / the routing object to be entered console.log (from); / / the routing object to be left by the current navigation next (); / / call this method to enter the next hook}) / / so that you can clearly see the meaning of each parameter.

Next (): proceed to the next hook in the pipe. If all the hooks are finished, the navigation status is confirmed (confirmed).

Next (false): interrupts the current navigation. If the URL of the browser changes (either manually by the user or by the browser back button), the URL address is reset to the address of the from route.

Next ('/') or next ({path:'/'}): jump to a different address. The current navigation is interrupted and a new navigation is carried out. You can pass objects anywhere to next, and allow you to set options such as replace: true, name: 'home', and any options used in router-link 's to prop or router.push.

Be sure to call the next method, otherwise the hook will not be resolved

AfterEach global rear hook router.afterEach ((to, from) = > {/ /...})

Unlike the guards, however, these hooks do not accept next functions and do not change the navigation itself

From the point of view of usage, the front hook is more commonly used, such as login authentication and specifying the page name for the Vue single page reference, etc.

Router.beforeEach ((to,from,next) = > {if (to.meta.title) {document.title = to.meta.title; / / the title field in the meta written in the route} next ();}) so far, I believe you have a deeper understanding of "what's the difference between afterEach and beforeEach in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.