What hooks and applications does Vue-router have in JavaScript?

The content of this article is about what hooks and applications Vue-router has in JavaScript? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What hooks does Vue-router have? scenes to be used?

The implementation of the router can be clicked here

We have talked about what a hook is in the vernacular before, and we will repeat it here, that is, before what, and after what, It’s called hooks in English, life cycle if you’re professional, and guards if you’re more pretentious...

The concept of hooks also exists in vue-router, which is divided into three steps of memory

• Global guard

• Route exclusive guard

• Component exclusive guard

Global guard

It’s easy to understand, the global guard is able to monitor the global router actions

• ##router.beforeEach is triggered when the route is forwarded

const router = new VueRouter({ ... })
// to 要进入的目标路由对象
// from 当前的路由对象
// next resolve 这个钩子，next执行效果由next方法的参数决定
// next() 进入管道中的下一个钩子
// next(false) 中断当前导航
// next({path}) 当前导航会中断，跳转到指定path
// next(error) 中断导航且错误传递给router.onErr回调
// 确保前置守卫要调用next，否然钩子不会进入下一个管道
router.beforeEach((to, from, next) => {
  // ...
})

• router.afterEach is triggered when the route is post-resolved

// 与前置守卫基本相同，不同是没有next参数
router.afterEach((to, from) => {
  // ...
})

• router.beforeResolve

Similar to router.beforeEach, it is triggered after the parsing of guards and asynchronous routing components in all components

Route exclusive guard

The parameters and meaning are the same as the global guard, but the defined position is different

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Demo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      afterEnter: (to, from, next) => {
        // ...
      },
      
    }
  ]
})

Component exclusive guard

A new guard in the component, beforeRouteUpdate, is triggered when the component can be reused, such as /demo/:id, jump to /demo/ in /demo/1 2, /demo can be reused, and beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}

• will be triggered. Note that you cannot get this of the current component before beforeRouteEnter because the component has still been created. We can Use next(vm => {console.log(vm)}) to return this of the current component to perform some logical operations

Usage scenarios

The last entry before routing Typically you can do some permission control, clear or store some information, tasks, etc. when the route leaves.

Summary

The hooks in vue-router are divided into three types: global, local, and component. Form, they all have front guards and back guards. The front guard of the component cannot get this of the current component because the component has not been created yet. This can be returned through the next parameter. The front guard must call next. method, otherwise it will not enter the next tube

The above is the detailed content of What hooks and applications does Vue-router have in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!