Vue的路由钩子函数有哪些?

1、全局的路由钩子函数

        1.1、beforeEach(全局前置钩子),意思是在每次每一个路由改变的时候都要执行一遍

        它有三个参数:

        to: route:即将要进入的目标 路由对象

        from:route:当前导航正要离开的路由

        next:function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法

        应用场景:

        1、进行一些页面跳转前的处理,例如跳转到的页面需要进行登录才可以访问时,就会做登录的跳转

        2、进入页面登录判断、管理员权限判断、浏览器判断

        1.2、afterEach(全局后置钩子)

        beforeEach是在页面加载之前的,而afterEach是在页面加载之后的,所以这些钩子是不会接受next函数,也不会改变导航本身

2、单个路由内的钩子函数

        2.1、beforeEnter

        可以直接在路由配置上直接定义beforeEnter,这些守卫与全局前置守卫的方法参数是一样的

3、组件内的路由钩子函数

        beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

        应用场景

        1、清除组件中的定时器

        2、当页面有未关闭的窗口,或未保存的内容时,阻止页面跳转

        3、保存相关内容到Vuex和Session中

  • 13
    点赞
  • 70
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值