beforeEach implements routing jump verification function

This time I will bring you the beforeEach implementation routing jump verification function, what are the precautions beforeEach implements the route jump verification, 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 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:

Axios implementation of data interaction steps detailed explanation

Angular Component use case detailed explanation

The above is the detailed content of beforeEach implements routing jump verification function. For more information, please follow other related articles on the PHP Chinese website!