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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
js仿淘宝放大镜效果
Dec 28 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
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
在微信小程序中使用vant的方法
2019/06/07 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python实现人民币大写转换
2018/06/20 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
大型车展策划方案
2014/02/01 职场文书
工作表现证明
2015/06/15 职场文书
简短清晨问候语
2015/11/10 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书