router.beforeEach((to, from, next) => {
const nextRoute = [ 'login'];
var token = window.localStorage.token;
 if(token > 0 ){
  next();
 }else{
// next({ path: '/login', replace: true, query: { noGoBack: true } })
if (nextRoute.indexOf(to.name) == 0) { // 在免登录白名单,直接进入
next(); //记得当所有程序执行完毕后要进行next(),不然是无法继续进行的;
}else{
next({ path: '/login', replace: true })
}
} })
这个写在router.js页面export default router上面就可以

nextRoute   白名单地址
判断token是否大于0,是的话,代表token存在,是登陆过的,可以next();正常打开页面,否则就跳到登陆页面。
这个是拿token来判断,用别的修改if判断的条件就可以

vue 路由守卫的更多相关文章

  1. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  2. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  3. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  4. Vue路由守卫(跳转页面置顶的处理方)

    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...

  5. Vue | 路由守卫面试常考

    前言 最近在整理基础,欢迎掘友们一起交流学习 结尾有彩蛋哦! Vue Router 路由守卫 导图目录 路由守卫分类 全局路由守卫 单个路由守卫 组件路由守卫 路由守卫执行的完整过程 路由守卫分类 全 ...

  6. vue路由守卫

    路由守卫 //路由进来之时 beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined ...

  7. vue路由守卫触发顺序

    不同组件之间的路由跳转流程图 导航被触发(A–>B) 调用A组件内路由守卫beforeRouteLeave(to,from,next) 调用全局路由前置守卫router.beforeEach(t ...

  8. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

  9. Vue路由守卫之路由独享守卫

    ​ 路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ...

  10. Vue路由守卫之组件内路由守卫

    ​        beforeRouteEnter,进入路由前.需要注意这里不能使用this,因为我们使用的是进入路由之前,那会组件还没创建,得不到this这个属性,所有我们只能使用过vm异步语句来让 ...

随机推荐

  1. Spring 依赖注入中 Field 注入的有害性

    大致分为:Field 注入.构造注入.setter 注入 其中 Field 注入被认为有害的: 1. 违反了单一原则 当一个 class 中有多个依赖时,如果仅仅使用 Field 注入,则看不出有很多 ...

  2. systemverilog中实现饱和截位和饱和截位的分析

    截位(rnd/prnd/floor):都是去掉低位数据的操作(去掉低位低精度的数据,或者说小数位,降低数据的精度) 饱和(sat/sym_sat):都是去掉高位数据的操作,(去掉无符号数高位的0,或者 ...

  3. C#获取变更过的DataTable记录的实现方法

    本文实例讲述了C#获取变更过的DataTable记录的实现方法,是一个非常实用的功能!具体实现方法如下: 首先DataTable可以看做是一个物理表的内存式存储,每一个DataRow都有一个属性叫做R ...

  4. c++函数strapy

    头文件:#include <string.h> 定义函数:char *strcpy(char *dest, const char *src); 函数说明:strcpy()会将参数src 字 ...

  5. CQL语句

    CQL中默认忽略大小写,若需要大小写敏感,可使用双引号将对象包起来,引用的时候也要用双引号包住 tips: 使用CQL需要预装Python环境 Ⅰ.基本知识点 1.1 数据类型 这边和关系型数据库相近 ...

  6. Windows bat批处理使用

    mkdir commonmkdir datamkdir savemkdir data\tsushima_m_mapmkdir save\tsushima_m_map msxsl ..\common\r ...

  7. hibernate学习(初识)

    hibernate是一个开源的对象关系映射框架(ORM).对JDBC进行了轻量级的封装.将对象和数据库表建立映射关系,hibernate框架使用在数据持久化层(DAO). ORM:对象关系映射(Obj ...

  8. scikit-learn学习笔记

    参考资料: python机器学习库scikit-learn简明教程之:随机森林 http://nbviewer.jupyter.org/github/donnemartin/data-science- ...

  9. 2019春第八周作业Compile Summarize

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 在这里 我在这个课程的目标是 能更加进一步的够熟练掌握指针的用法 这个作业在那个具体方面帮助我实现目标 指针对于高阶题目的做法 参考文献与 ...

  10. Cocos Creator 生命周期回调(官方文档摘录)

    Cocos Creator 为组件脚本提供了生命周期的回调函数.用户通过定义特定的函数回调在特定的时期编写相关 脚本.目前提供给用户的声明周期回调函数有: onLoad start update la ...