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 相关文章推荐
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
js数组实现权重概率分配
Sep 12 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
如何在django中运行scrapy框架
2020/04/22 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
外语学院毕业生的自我鉴定
2013/11/28 职场文书
毕业生自荐书
2014/02/03 职场文书
《燕子》教学反思
2014/02/18 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
开场白怎么写
2015/06/01 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
《詹天佑》教学反思
2016/02/20 职场文书