Use vue-route+beforeEach to make navigation guards

This time I will introduce to you what are the precautions for using vue-route beforeEach to make navigation guards. The following is a practical case, let's take a look.

Doing some verification before routing jumps, such as login verification (go to the login page if you are not logged in), is a common requirement in websites. In this regard, beforeRouteUpdate provided by vue-route can easily implement navigation guards (navigation-guards).

The name navigation-guards sounds weird, but since the official document translates it this way, let’s call it that.

Paste the document address: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Let’s first excerpt the usage of beforeRouteUpdate in a document:

You can use router.beforeEach to register a global beforeEach guard:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

When a navigation is triggered, the global beforeEach guard is called in the order of creation. Guards are parsed and executed asynchronously. At this time, the navigation is waiting until all guards are resolved.

Each guard method receives three parameters:

to: Route: the target routing object to be entered

from: Route: the current navigation The route that is about to leave

next: Function: This method must be called to 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.

next(error): (2.4.0) If the parameter passed to next is an Error instance, the navigation will be terminated and the error will be passed to the callback registered by router.onError().

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

Let’s write an example below. In the previous blog, our account page, including courses and orders, needs to determine whether you are logged in before jumping; if you are logged in, go to the login page. Jump to the homepage:

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate the JS Cookie plug-in

##How to use Node.js to register for email activation

The above is the detailed content of Use vue-route+beforeEach to make navigation guards. For more information, please follow other related articles on the PHP Chinese website!