Vue Routing (Navigation Guard) and its specific use

Recently learned VUE, feeling a lot of knowledge points, and it is very important, so, add a little note today

Official document

Navigation guard is actually a route guard It can also be routing interception, we can intercept from routing to determine if the user is logged in, the user has permission to browse, need to combine Meta to achieve

VUE medium routing has three, A global routing guards, one is the component within the component, one is the Router exclusive guard

The so-called routing guard can be simple to understand the security guard of a house, you must enter this house. Through the inspection of the security guard, want to tell the route to guard you from? Can you put it in a stranger? Where is going? Then the security guard tells you how to do next step? If you are indeed this house owner allows you to enter, let you enter, otherwise you will call the house owner, with the home owner (login registration), give you permissions.

// During this matching judgment has this permission or requirement, this generally used page permission settings, such as which pages need to be logged in to enter, which does not need to.matched. Some (res => res.meta.requireauth)
   First, the global routing guard 

The so-called global routing guard It is the community gate. The whole community will be in this door. You want to enter any of these houses. You need to pass this door. The global routing is two: one is the overall front guard, one is the whole game Guard

Router.beforeeeach ((to, from, next) => {console.log (to) => / / Which page is going? Console.log From) => // Which page comes? Next () => // A callback function} Router.Aftereach (to, from) = {}

Next (): Press (): Tongye function parameter configuration
  NEXT (False : Interrupt the current navigation. If the URL of the browser changes (possibly the user manually or the browser back button), the URL address will be reset to the address of the FROM routing  
Next (‘/’) or next ({ PATH: ‘/’}: Jump to a different address. The current navigation is interrupted and then a new navigation. You can pass any position object to Next, and allow settings such as Replace: true, name: ‘home’ and any options in the Router-link to prop or Router.push

Second, component routing guard

// Written by Methods: {} equivalence, component routing guard is written in each separate VUE The routing of the file is guarded beforboteneTer (to, from, next) {// Note, the component instance is not rendered before the routing, so the this instance cannot be accessed by VM to access the component instance next (VM => {} BEFOREROUTEUPDATE (TO, FROM, NEXT) {// Top page, refresh Different data, call,} beforouteLeave (to, from, next) {// Call when the current routing page}

Third, the routing exclusive guard

Routing exclusive guard is a guard in the routing configuration page separately gives the route configuration
export default new VueRouter ({routes: [{path: ‘/’, name: ‘home’, component: ‘Home’, beforeEnter: (to, from, next) => {// …}}]})

vue-router provides navigation hooks: hook beforeEach global navigation front and rear global navigation hook afterEach, they will after routing trigger is about to change and change before. You need to determine whether the user is logged in beforeEach navigation judge hooks.

Navigation hook has three parameters:

1, to: a target route object about to enter;
  2, from: current navigation is about the object to be routed away;  
3, next: after calling this method, in order to enter the next hook function (afterEach).
next () // referred to route directly into the

next (false) // interrupt current route

next ( ‘route’) // jump specified route

next ( ‘ error ‘) // jump misrouted


routing configuration file:

import Vue from ‘vue’import Router from’ vue-router’import HelloWorld from’@ / Components / HelloWorld’Import HomePage from’ @ / pages / home.vue’vue.use (router) const router = new router ({routes: [{pat: ‘/’, name: ‘HelloWorld’, Component: HelloWorld}, {path: ‘/ home’, name: ‘Home’, Component: HomePage}, {path: ‘*’, redirect: ‘/ home’}],}) Router.beforeeeach ((to, from, Next ) => {console.log (to); console.log (from); Next ();}) Export default router;

The print results are as follows:

Implement the code of user verification:

Router.beforeeeach ((to, from, next) => {// I Here, a method of obtaining user information let islogin = window.SessionStorage.GetItem (islogin) {// If the user information exists, it is executed down. Next ()} else {// If the user Token does not exist, jump to the login page if (to.Path === ‘/ login’) {next ()} else {Next (‘/ login’)}}}
and BeForeeach are different from AfteReach does not receive third Parameter next function, no change navigation itself, generally Beforeeach uses the most, less AfteReach is used.

Router.AFTEREACH ((to, from) => { // This is not received here; console.log (from);}

vue 路由守卫(导航守卫)及其具体使用

here is here about Vue Routing (Navigation Guard) and Its specific articles are introduced to this, more related Vue routing guards, please search for Tumi clouds or continue to browse the following related articles, I hope everyone will support Tumi cloud!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment