• 技术文章 >web前端 >Vue.js

    vue路由守卫有哪三种类型

    青灯夜游青灯夜游2021-03-01 16:47:25原创524

    vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫、全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫)。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现

    vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫

    所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你权限。

    一.全局守卫

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

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

    3. 如下例:main.js中设置全局守卫

    router.beforeEach((to,from,next)=>{
      if(to.path == '/login' || to.path == '/register'){
        next();
      }else{
        alert('您还没有登录,请先登录');
        next('/login');
      }
    })

    4. 全局后置钩子router.afterEach((to,from)=>{})

    router.afterEach((to,from)=>{
      alert("after each");
    })

    5. 判断store.gettes.isLogin === false 是否登录

    二.组件内的守卫

    1. 到达这个组件时,beforeRouteEnter:(to,from,next)=>{}

    <script>
    export default {
        data(){
            return{
                name:"Arya"
            }
        },
        beforeRouteEnter:(to,from,next)=>{
            next(vm=>{
                alert("hello" + vm.name);
            })
        }
    }
    </script>

    2.webp.jpg

    1.webp.jpg

    2. 离开这个组件时,beforeRouteLeave:(to,from,next)=>{}

    beforeRouteLeave:(to,from,next)=>{
            if(confirm("确定离开此页面吗?") == true){
                next();
            }else{
                next(false);
            }
        }

    三.路由独享的守卫

    1. beforeEnter:(to,from,next)=>{},用法与全局守卫一致。只是,将其写进其中一个路由对象中,只在这个路由下起作用。

    更多编程相关知识,请访问:编程视频!!

    以上就是vue路由守卫有哪三种类型的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue 路由 路由守卫
    上一篇:vue哪一年出来的 下一篇:vue3.0有哪些新特性
    第15期线上培训班

    相关文章推荐

    • 浅谈vue.js中$refs的使用方法(附代码)• Vuex中Mutations怎么理解?怎么用?• vue项目中怎么设置title图标?(图文详解)• vue.js为什么要镜像

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网