vue-router的钩子函数

1.全局导航钩子函数

• vue router.beforeEach(全局前置守卫)
• vue router.afterEach(全局后置守卫)
• vue router.beforeResolve(全局解析守卫)

注:beforeEach和afterEach都是vue-router实例对象的属性,每次跳转前,beforeEach和afterEach都会执行。

beforeEach

每次每一个路由改变的时候都需要执行一次

• 有三个参数
  • to:即将要进入的目标
  • from:当前导航正要离开的路由
  • next:function函数,必须调用
• 应用场景
  • 进行页面的跳转,如判断登录页面是否需要进行拦截

afterEach

在加载之后,有两个参数:to/from

2.单个路由里面的钩子

• 主要用于写某个指定路由跳转时需要执行的逻辑

beforeEnter

• 有三个参数:to/from/next

{
    path:'/',
    name:'Login',
    component:Login,
    beforeEnter:(to,from,next)=>{
        consloe.log("即将进入Login");
        next();
    }
},
复制代码

3.组件内钩子函数

• beforeRouteEnter
• beforeRouteUpdata
• beforeRouteLeave 这三个钩子都是写在组件里面可以传三个参数(to,from,next),作用与前面类似。

转载于:https://juejin.im/post/5d01a633e51d45778f076d1e