vue路由守卫

路由守卫分为三种 ——分别是:全局路由守卫、组件路由守卫、独享路由守卫。

一.全局守卫

全局守卫又分为全局前置守卫、和后置守卫

全局钩子: beforeEach、 afterEach

组件内守卫:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

独享守卫(单个路由里面的钩子): beforeEnter、 beforeLeave

1. router.beforeEach((to,from,next)=>{})

        回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。

        从名字全局前置守卫不难理解,它是全局的,即对 整个单页应用(SPA) 中的所有路由都生效,所以当定义了全局的前置守卫,在进入每一个路由之前都会调用这个回调,那么如果你在回调中对路由的跳转条件判断出错,简单点就是死循环…因为你遗漏了某种路由跳转的情况,守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

2.router.afterEach((to, from) => {})

        只有两个参数,to:进入到哪个路由去,from:从哪个路由离。

        理解了全局前置守卫,那么全局后置守卫也就那么一回事。全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作,并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。

二.组件内的守卫

组件路由守卫分为到达这个组件时,离开这个组件时

1. beforeRouteEnter:(to,from,next)=>{}——到达

        to,from参数与上面使用方法一致。next回调函数略有不同。

2. beforeRouteLeave:(to,from,next)=>{}——离开

        点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。

三.路由独享的守卫

1. beforeEnter:(to,from,next)=>{}

        与全局路由守卫用法一致,但是只能针对一个页面使用

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

相关阅读更多精彩内容

  • 路由守卫是什么? 官方解释:“导航”表示路由正在发生改变。正如其名,vue-router提供的导航守卫主要用来通过...
    dingFY阅读 5,346评论 0 2
  • vue的路由守卫,也叫路由钩子、导航守卫或导航钩子。路由(vue-router) 提供的导航守卫主要用来:通过跳转...
    寒城飞雪阅读 5,364评论 0 0
  • 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:...
    倚剑闯天涯_阅读 13,638评论 0 5
  • 1.全局前置守卫beforEach(写在main.js 或router.js添加) 守卫方法接收三个参数:to:...
    抽疯的稻草绳阅读 5,141评论 0 7
  • 概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...
    我那么逗阅读 4,394评论 0 8

友情链接更多精彩内容