vue路由拦截及页面跳转的设置方法
路由设置:router/index.js
exportdefaultnewRouter({ routes:[ { path:'/selfcenter', name:'selfcenter', meta:{ requireAuth:true//配置此条,进入页面前判断是否需要登陆 }, component:selfcenter } ] })
main.js:
/*eslint-disableno-new*/ router.beforeEach((to,from,next)=>{ if(to.matched.some(res=>res.meta.requireAuth)){//验证是否需要登陆 if(sessionStorage.getItem('sid')){//查询本地存储信息是否已经登陆 next(); }else{ next({ path:'/login',//未登录则跳转至login页面 query:{redirect:to.fullPath}//登陆成功后回到当前页面,这里传值给login页面,to.fullPath为当前点击的页面 }); } }else{ next(); } });
login.vue:
登陆成功后:
sessionStorage.setItem('sid',res.data.data.sid);//设置本地存储信息 this.$router.push(this.$route.query.redirect);//跳转至前一页,this.$route.query.redirect是获取上面传递过来的值
总结
以上所述是小编给大家介绍的vue路由拦截及页面跳转的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。