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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
Zerg兵种介绍
2020/03/14 星际争霸
PHP Array交叉表实现代码
2010/08/05 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python学习资料
2007/02/08 Python
Python标准库与第三方库详解
2014/07/22 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python 实现二维列表转置
2019/12/02 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
Java的五个基础面试题
2016/02/26 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
中学生获奖感言
2014/02/04 职场文书
金秋助学感谢信
2015/01/21 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python