路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面。

router.beforeEach((to, from, next) => {

const nextRoute = [ 'api', 'my/index, 'course'];

  if(nextRoute.indexOf(to.name) >= 0){

  //可以在这里面判断是否登录了

  

if (!store.state.auth.IsLogin) {

vueRouter.push({name: 'login'})

}

}

if (to.name === 'login') {

if (auth.IsLogin) {

vueRouter.push({name: 'home'});

}

}

  next();//一定要加上,不然不解析模板

})

to:即将进入的路由

from:即将离开的路由

next:是一个函数,一定要加上,不然不解析模板

vue 导航守卫,验证是否登录的更多相关文章

  1. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  2. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  3. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  4. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  5. vue 导航守卫

    1.全局守卫(在所有路由展示前触发)//在main.js中 router.beforeEach((to, from, next) => {      to 即将要进入的到的路由,值为路由    ...

  6. Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

  7. vue2.0 实现导航守卫(路由守卫)---登录验证

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

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

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

  9. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. UICollectionView didSelectItemAtIndexPath实现方法

    didSelectItemAtIndexPath是通过UIResponder的四个touch方法实现的(touchBegan, touchMove, touchEnd, touchCancel),因此 ...

  2. Tensorflow卷积神经网络[转]

    Tensorflow卷积神经网络 卷积神经网络(Convolutional Neural Network, CNN)是一种前馈神经网络, 在计算机视觉等领域被广泛应用. 本文将简单介绍其原理并分析Te ...

  3. The Ultimate Productivity Hack is Saying No

    The Ultimate Productivity Hack is Saying No By James ClearRead this on JamesClear.com The ultimate p ...

  4. faiss索引基于数量级和内存限制的选择

    它是一个能使开发者快速搜索相似多媒体文件的算法库.而该领域一直是传统的搜索引擎的短板.借助Faiss,Facebook 在十亿级数据集上创建的最邻近搜索(nearest neighbor search ...

  5. concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

    var arr1 = ['a', 'b', 'c']; var arr2 = ['d', 'e', 'f']; var arr3 = arr1.concat(arr2); // arr3 is a n ...

  6. install postgresql 10 on redhat linux 7 Redhat 安装 postgresql 10

    ---恢复内容开始--- 1. install linux 2. 切换mirror a. 备份原来的repo  文件, [root@localhost ~]# mv /etc/yum.repos.d/ ...

  7. Taro开发之城市选择器(带坐标)

    要写个城市选择器能返回对应的城市(这里只定义到了地级市),同时返回坐标系,参考了网上资料,下面就看看具体代码吧 import Taro, { Component } from '@tarojs/tar ...

  8. jquery花式图片库——jqFancyTransitions

    http://www.html580.com/3785 https://yq.aliyun.com/ziliao/4390 使用方法调用插件js文件: <script src="js/ ...

  9. Java中的属性和方法

    题目 实体类 测试类

  10. 【centos】/usr/bin与/usr/local/bin的区别

    首先注意usr 指 Unix System Resource,而不是User 然后通常: /usr/bin下面的都是系统预装的可执行程序,会随着系统升级而改变. /usr/local/bin目录是给用 ...