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 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
jQuery实现简单全选框
Sep 13 jQuery
使用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
提取HTML标签
2006/10/09 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
记录Django开发心得
2014/07/16 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
一套.net面试题及答案
2016/11/02 面试题
大学生个人自我鉴定
2013/12/03 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
《长相思》听课反思
2014/04/10 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
防暑降温通知书
2015/04/27 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书