Vue 路由守卫

路由守卫分类:

  1,全局守卫

    指的是路由实例上直接操作的钩子函数。

    特点是所有路由配置的组件都会触发。

    • beforeEach (to, from, next)  -- >: 跳转前触发。
    • beforeResolve (to, from, next)  -->: 在beforeEach, beforeRouteEnter之后触发。
    • afterEach (to, from, next) -->: 跳转路由完成后触发。

  2,路由守卫

    指的是在单个路由配置的时候也可以设置的函数钩子。

    • beforeEnter (to, from, next)

  3, 组件守卫

    指的是在组件内执行的钩子函数,类似于组件内生命周期,相当于为配置路由的组件添加的生命周期钩子函数。

    • beforeRouteEnter (to, from, next)  --> :beforeCreated 阶段触发,不能操作vm实例
    • beforeRouteUpdate (to, from, next)
    • beforeRouteLeave (to, from, next)

   以上相关参数解释如下:

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

     from : 即将要离开的路由对象。

     next :涉及到next 参数的钩子函数,必须调用next 方法 来resolve 这个钩子,否则会中断在这,不会继续往下执行。

       next():进行管道中的下一个钩子,如果全部执行完了,则导航的状态就是confirmed(确认的)。

       next(false):中断当前的导航,如果浏览器的URL改变了(用户手动或浏览器后退),那么URL地址会重置到 from 路由对应的地址。

       next(' / ')或者 next({path:' / '}):跳转到一个不同的地址,当前的导航被中断,然后进行一个新的导航,可传递参数可以是 router-link 标签中的 to 属性参数,或者 route.push 中选项。

       next(error): 如果传入 next 参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

                   

posted @ 2020-05-10 17:01  guogrant  阅读(468)  评论(0编辑  收藏  举报