vue.js全局路由下的导航守卫的实现
程序员文章站
2022-04-07 17:07:43
...
本篇文章给大家带来的内容是关于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) 查看)
相关推荐:
以上就是vue.js全局路由下的导航守卫的实现的详细内容,更多请关注其它相关文章!
推荐阅读
-
RHCS高可用集群下的iscsi共享磁盘与GFS2全局文件系统(实现多点写入)
-
RHCS高可用集群下的iscsi共享磁盘与GFS2全局文件系统(实现多点写入)
-
非node环境下的vue.js 实现简单的购物车计算功能 样式请无视
-
vue.js开发实现全局调用的MessageBox组件实例代码
-
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
-
vue使用vuex实现首页导航切换不同路由的方法
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
-
vue使用vuex实现首页导航切换不同路由的方法
-
vue.js实现会动的简历(包含底部导航功能,编辑功能)