1、概念
（1）路由守卫，也称为路由拦截，我们可以通过路由守卫(拦截)，来判断用户是否登录，该页面用户是否有权限浏览，需要结合vue-router 路由元信息meta来实现
（2）路由元信息的作用就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，可以按照自己想要的效果进行处理即可，如下代码中在路由元信息中设置路由守卫、标题
2、路由守卫的种类
vue中路由守卫一共有三种：全局路由守卫，独享守卫，组件内路由守卫
3、简单理解路由守卫
所谓的路由守卫可以简单的理解为小区门口爱吃小熊饼干的小保安，想要进入这个小区就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个小区的住户是允许进入的，那就让你进入，否则就要打电话，跟房主商量(登录注册)，给你权限。
4、全局路由守卫又分为全局前置守卫和全局后置守卫
(1)全局前置守卫
全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。常用于登录鉴权，这样页面没显示出来时就已经判断了你是否有权限
//全局前置守卫
router.((to,from,next) =>{
//第一个参数to，切换后的路由对象，需要跳到那个路由对象去，理解为你要去哪？
//第二个参数from，切换前的路由对象，跳转之前的路由对象，理解为你从哪来？
//第三个参数next()，是否往下执行，如果不写的话路由就不会跳转，操作将会终止，理解为放行
})
（2）全局后置守卫
全局后置守卫，在每次路由切换之后调用，举例：当前我在A路由组件，我要切换到B路由组件，那么后置路由守卫就是在我点了切换按钮后B路由组件呈现到页面中后被调用。是成功切换到B组件后触发的
//全局后置守卫
//router.((to,from) =>{
//第一个参数to，切换后的路由对象，需要跳到那个路由对象去，理解为你要去哪？
//第二个参数from，切换前的路由对象，跳转之前的路由对象，理解为你从哪来？
全局后置守卫是整个单页应用中每一次路由跳转时后都会执行其中的回调。所以多用于路由跳转后的触发的页面操作，例如上面代码中，每次条转到新页面都会弹出“成功跳转，触发后置路由守卫！！”的弹窗，它并不进行页面的重定向或跳转。
5、组件独享守卫
组件独享守卫顾名思义就是对单个组件单独设置的守卫，也是在进入组件时被调用,与全局后置守卫区别就在于，全局路由守卫服务的是所有路由组件，而组件独享守卫是你想对那个组件的路由进行权限控制就直接在那个路由配置项中添加守卫，作用域也仅限于该路由
//组件独享守卫
beforeEnter(to,from,next){
//第一个参数to，切换后的路由对象，需要跳到那个路由对象去，理解为你要去哪？
//第二个参数from，切换前的路由对象，跳转之前的路由对象，理解为你从哪来？
//第三个参数next()，是否往下执行，如果不写的话路由就不会跳转，操作将会终止，理解为放行}
6、组件内守卫
当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件
//进入守卫：进入该组件时被调用
beforeRouteEnter (to, from, next) {
//第一个参数to，切换后的路由对象，需要跳到那个路由对象去，理解为你要去哪？
//第二个参数from，切换前的路由对象，跳转之前的路由对象，理解为你从哪来？
//第三个参数next()，是否往下执行，如果不写的话路由就不会跳转，操作将会终止，理解为放行
},
//离开守卫：离开该组件时被调用
beforeRouteLeave (to, from, next) {
//第一个参数to，切换后的路由对象，需要跳到那个路由对象去，理解为你要去哪？
//第二个参数from，切换前的路由对象，跳转之前的路由对象，理解为你从哪来？
//第三个参数next()，是否往下执行，如果不写的话路由就不会跳转，操作将会终止，理解为放行
}
beforeRouteEnter()、BeforeRouterLeave(),它并不像全局前、后置守卫一样在路由组件加载完成之后调用，而是在你切换出这个组件后被调用，强调的是你“进入和离开”的动作，其次全局路由守卫的前、后置，都会被执行到，当你进去组件后组件内路由守卫beforeRouteEnter就一定会执行，但如果不离开beforeRouteLeave就不会执行到
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/150361.html