快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

vue路由守卫有三种分别是什么

这篇文章给大家分享的是有关vue路由守卫有三种分别是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家集网站建设,开江企业网站建设,开江品牌网站建设,网站定制,开江网站建设报价,网络营销,网络优化,开江网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

vue路由守卫有三种,分别为:1、全局守卫“router.beforeEach”;2、组件内的守卫“beforeRouteEnter”;3、路由独享守卫“beforeEnter”。

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

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

 // 通过这个匹配判断是否有该权限或要求,这个一般作为页面权限设置,比如哪些页面需要登录才能进入,哪些不需要
to.matched.some(res => res.meta.requireAuth)

一.全局守卫

1. router.beforeEach((to,from,next)=>{})
2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
3. 如下例:main.js中设置全局守卫
  • 在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。

  • 如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。

  • 这样就可实现,用户在未登录状态下,展示的一直是登录界面。

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录,请先登录');
    next('/login');
  }
})
4. 全局后置钩子router.afterEach((to,from)=>{})
  • 只有两个参数,to:进入到哪个路由去,from:从哪个路由离。

  • 如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。

router.afterEach((to,from)=>{
  alert("after each");
})
5. 判断store.gettes.isLogin === false  是否登录

二.组件内的守卫

1.  到达这个组件时,beforeRouteEnter:(to,from,next)=>{}
  • 在Admin.vue文件中,点击转到admin路由时,执行beforeRouteEnter函数

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

  • 如下例,data 组件内守卫有特殊情况,如果我们直接以
    beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面,会发现alert输出hello undefined。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。

vue路由守卫有三种分别是什么

2. 离开这个组件时,beforeRouteLeave:(to,from,next)=>{}
  • 点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。

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

三.路由独享的守卫

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

vue路由守卫有三种分别是什么

感谢各位的阅读!关于“vue路由守卫有三种分别是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文题目:vue路由守卫有三种分别是什么
转载来源:http://6mz.cn/article/ggdgsj.html

其他资讯