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 相关文章推荐
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP基本语法实例总结
2016/09/09 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python中def是做什么的
2020/06/10 Python
Python try except else使用详解
2021/01/12 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
国家助学金获奖感言
2014/01/31 职场文书
安全标语口号
2014/06/09 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers