vue路由拦截及页面跳转的设置方法


Posted in Javascript onMay 24, 2018

路由设置:router/index.js

export default new Router({ 
 routes: [ 
  { 
   path: '/selfcenter', 
   name: 'selfcenter', 
   meta: { 
    requireAuth: true // 配置此条,进入页面前判断是否需要登陆 
   }, 
   component: selfcenter 
  } 
 ] 
})

main.js:

/* eslint-disable no-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路由拦截及页面跳转的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
详解JS面向对象编程
Jan 24 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
使用Vue自定义指令实现Select组件
May 24 #Javascript
详解Vue单元测试case写法
May 24 #Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 #Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 #Javascript
react实现点击选中的li高亮的示例代码
May 24 #Javascript
浅谈Webpack 是如何加载模块的
May 24 #Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
You might like
php的array_multisort()使用方法介绍
2012/05/16 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP实现递归的三种方法
2020/07/04 PHP
jquery中this的使用说明
2010/09/06 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python requests库用法实例详解
2018/08/14 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python实现计算器功能
2019/10/31 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Python的in,is和id函数代码实例
2020/04/18 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
公关活动策划方案
2014/05/25 职场文书
抵押贷款承诺书
2014/05/30 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
感恩老师主题班会
2015/08/12 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python