Vue-router路由判断页面未登录跳转到登录页面的实例


Posted in Javascript onOctober 26, 2017

如下所示:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

在这之前是给路由加一个meta属性:

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
 },
}

注意:但是事实是登录的时候大多数时候并不进行跳转,所以这里需要在login跳转的路径中再加一段:

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

以上这篇Vue-router路由判断页面未登录跳转到登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 #Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 #Javascript
js 只比较时间大小的实例
Oct 26 #Javascript
基于Require.js使用方法(总结)
Oct 26 #Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
js右键菜单效果代码
2007/07/21 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Django stark组件使用及原理详解
2019/08/22 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
运动会邀请函范文
2014/02/06 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
干部对照检查材料范文
2014/08/26 职场文书
八一建军节演讲稿
2014/09/10 职场文书
2014年秘书工作总结
2014/11/25 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
花木兰观后感
2015/06/10 职场文书
理想国读书笔记
2015/06/25 职场文书
一年级下册数学教学反思
2016/02/16 职场文书