首页 > web前端 > js教程 > 正文

vue.js全局路由下的导航守卫的实现

不言
发布: 2018-08-23 16:35:11
原创
2205人浏览过

本篇文章给大家带来的内容是关于vue.js全局路由下的导航守卫的实现 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是导航守卫?

笼统的说,导航守卫是控制用户能够进入哪些路由和不能进入哪些路由的控制器,也就是管理路由的

打比方,在你第一次进入网站,想写博客时,你必须先登录,才能进入博客编写;登陆界面就好比你能进入的路由,而博客是你不能进入的路由,当你登陆后,控制器才会给你权限,才能进入博客路由,这就是导航守卫的用途

全局路由 要在 main.js 文件下创建

想用导航守卫先要有路由

立即学习前端免费学习笔记(深入)”;

//main.js
const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[   //二级路由
        {path:'/about/contact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [  //三级路由
            {path:'/phone',name:'phonelink',component:Phone},
            {path:'/name',name:'namelink',component:Name}
          ]},
      ]},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});
登录后复制

利用上面路由对象 router  的方法 beforeEach() 实现导航守卫

//main.js
//to:跳转到的路由 from:从哪个路由离开  next:显示函数
router.beforeEach((to,from,next)=>{     
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert("请先登录");
    next('/login');
  }
});
登录后复制

‘/login’   '/register'  为自己定义的路由地址

to.path 为跳转到的路由地址

next() 为显示当前路由内容

next('/login') 跳转到指定路由并显示指定路由的内容

to 对象可获取的信息(console.log(to) 查看)

相关推荐:

VueRouter应该怎么使用

Vue动态重定向和

以上就是vue.js全局路由下的导航守卫的实现的详细内容,更多请关注php中文网其它相关文章!

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号