路由钩子函数

全局钩子函数:

    beforeEach:

      beforeEach一共接收三个参数,分别是to、from、next;to:即将进入的路由对象;from:正要离开的路由对象;next:路由的控制参数;

      next一共有四种调用方式:

      next():一切正常调用这个方法进入下一个钩子;

      next(false):取消路由导航,这时的url显示的是正要离开的路由地址;

      next('/login'):当前路由被终止,进入一个新的路由导航(路由地址可以自由指定)

      next(error):路由导航终止并且错误会被传递到router.onError()注册过的回调中;

    我们一般是用全局钩子来控制权限,像什么进页面没有登录就跳登录页,需要用户达到什么级别才能访问当前页面都是属于页面权限控制,都是可以通过beforeEach钩子函数来实现


AfterEach:


      AfterEach和beforeEach一样都是属于全局守卫钩子,都是在main.js中进行调用;其中AfterEach比beforeEach少一个next参数;


      to:即将要进入的路由对象;


      from:正要离开的路由对象;


      afterEach()我们一般用来重置页面滚动条位置:


      假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面的滚动条位置就会在上一个页面停留的位置;这个时候我们就可以利用afterEach进行重置:


组件内的钩子函数:

    beforeRouteEnter(to,from,next):

    在路由进入前调用,因为此时的vue实例还没有创建,所以beforeEnter是唯一一个不能使用this的钩子函数;

    to:即将要进入的路由对象;

    from:正要离开的路由对象;

    next:路由控制参数

    beforeRouteUpdate(to,from,next):

    在路由发生修改的时候进行调用,比如我们上一篇文章讲到的动态路由传参,这种情况我们的beforeRouteUpdate也是会被调用的;

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数;

    beforeRouteLeave(to,from,next):

    在路由离开该组件时调用;

    

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数

注意:beforeRouteEnter因为触发的时候vue实例还没有创建,所以这个钩子函数中不能使用this,而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的,因为当这两个函数触发的时候实例都已经被创建了;

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容