Shulou(Shulou.com)06/02 Report--

Editor to share with you how to use routing guards in Vue. I hope you will get something after reading this article. Let's discuss it together.

1. Global Guard 1.1 Global Front Guard

As the name implies, the front guard mainly performs a series of operations according to your status before you make the route jump (the global front is triggered before the route initialization and jump).

You can use router.beforeEach to register a global front guard (Each: each, that is, triggered when any route jumps)

Each guard method receives three parameters:

To:Route: the routing object that will enter the destination

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

1. Next (): perform a to under the forehead in the pipe. If the hook is finished, the navigation status is confirmed (confirmed)

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

3.next ('/ ") or next ({path:'/'}): jump to the same address. The current navigation is interrupted, and then proceed to the next new navigation. You can want next to pass any object and allow you to set options such as replace:true, name:'home', and any options in to prop or router.push that use router-link

Make sure that the next function is called strictly once in any given navigation guard, it can occur more than once, but only if all logical paths do not overlap, otherwise the hook will never be parsed or erroneous.

1.1.1 use

You can print out from, to and next to see what information they will save.

Give an example

Import Vue from 'vue'import VueRouter from' vue-router'import Home from'.. / views/Home.vue'import About from'.. / views/About.vue'import News from'.. / views/News.vue'import Message from'.. / views/Message.vue' Vue.use (VueRouter) const routes = [{path:'/ home', name: 'Home', component: Home, children: [{path:' message' / / do not write: / news component: Message}]}, {path:'/ about', name: 'aboutName', component: About, children: [{/ / configure child routing path:' news' via children / / do not write: / news component: News}]}] const router = new VueRouter ({routes}) / / Global Front Route Guard-is called during initialization and router.beforeEach ((to, from, next) is called every time the route is switched) = > {console.log (to) / / here is a simple example / / that is to determine whether the user has entered the route requiring authentication (the distance here is news and message) if (to.path = ='/ home/message' | | to.path = ='/ about/news') {/ / if so Then determine whether the information is cached locally (here simulates the login token) if (localStorage.getItem ('name') =' haungzhizhen') {next ()} else {/ / if not, you can rest assured that next ()}}) export default router

The deficiency of the above example is that when there are many routes that require authentication, you need to judge one by one. That may not be necessary, so here we introduce another attribute of routing, namely meta, which can be configured in each route. It is generally used to identify identifiable attributes, and you can agree to judge by force, as follows:

/ / use metarouter.beforeEach ((to, from, next) = > {console.log (to)) If (to.meta.isAuth) {/ / determine whether authentication if (localStorage.getItem ('name') = =' haungzhizhen') {next ()}} else {next ()}) 1.2 Global rear routing guard / / global rear routing guard is called during initialization, router.afterEach ((to) is called after each route switch From) = > {if (to.meta.title) {document.title = to.meta.title | | 'example of Route Jump' / / modify title} else {document.title = 'vue_test'}}) 1.3 Integration

two。 A guard exclusive to routing.

You can define the beforeEnter guard directly in the routing configuration. These parameters are the same as the method parameters of the global front guard.

Const router = new VueRouter ({routes: [{path:'/ foo', component: Foo, beforeEnter: (to, from, next) = > {/ /...}}]}) 3. Guards within the component

Finally, you can define the routing navigation guard directly in the routing component:

BeforeRouterEnter

BeforeRouterUpdate

BeforeRouterLeave

Const Foo = {template: `...`, beforeRouteEnter (to, from, next) {/ / call / / No before rendering the corresponding route for this component by confirm! Yes! Get component instance `this` / / because the component instance has not been created before the guard executes}, beforeRouteUpdate (to, from, next) {/ / the current route changes, but the component is called / / for example, for a path / foo/:id with dynamic parameters, when it jumps between / foo/1 and / foo/2 / / because the same Foo component is rendered, the component instance is reused. And this hook will be called in this case. / / access component instance `this`}, beforeRouteLeave (to, from, next) {/ / call / / access component instance `this`} when navigation leaves the corresponding route of the component. After reading this article, I believe you have some understanding of "how to use routing guards in Vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.