beforeEach implementation of navigation guard case tutorial

This time I will bring you beforeEach implementation Navigation guard case tutorial, what are the precautions for beforeEach implementation of navigation guard, the following is a practical case, let's take a look.

Routing Doing some verification before jumping, 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 excerpt a document first Usage of beforeRouteUpdate:

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

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

When a navigation is triggered, the global front 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 route to be enteredObject

from: Route: The route that the current navigation 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 does JS store original values ​​and reference values

JS uses regular expressions to determine date of birth

The above is the detailed content of beforeEach implementation of navigation guard case tutorial. For more information, please follow other related articles on the PHP Chinese website!