主要配合路由生命周期使用

  实现一个进度条的效果

  使用方法:

    1. 下载:npm install --save nprogress

    使用:NProgress.start();  开始

       NProgress.done(); 停止

  在 router 中使用路由守卫

  token 重定向的使用

  router.beforeEach(to, from, next){

    const isLogin = localStorage.eleToken ? true : false;

    if (to.path == '/login' || to.path == '/register'){

      next();

    }

    else {

      isLogin ? next() : next('/login');

    }

  }

NProgress的使用 及 路由 token 定向的使用的更多相关文章

  1. vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)

    1. 在路由实例中保留基础路由 router/index.js中只需要保留基础路由,其他的都删了 2. 获取用户菜单,并保存到Vuex中 stroe/modules/user.js中,有个getInf ...

  2. vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  3. vue路由守卫配合权限,白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  4. Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用

    在<基于 vite 创建 vue3 项目>一文中整合了 pinia,有不少伙伴不知道 pinia 是什么,本文简单介绍 pinia.主要包括三方面: pinia 的基本用法,在<基于 ...

  5. Asp.Net MVC中捕捉错误路由并设置默认Not Found页面。

    在Global中写一个Application_Error捕捉错误路由并重定向到Not Found页面.这里是全局性抓取错误路由,此处还可以写由错误路由导致访问失败的日志记录. protected vo ...

  6. react之路由

    功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...

  7. API总结

    1. 什么是Webservice WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是说能用编程的方法通过 Web 来调用这个应用程序.我们把调用这个WebServ ...

  8. vue 后台管理系统菜单权限管理

    来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删 login登录方法 login() { if (!this.username) { retur ...

  9. [Abp vNext微服务实践] - vue-element-admin登录二

    简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...

随机推荐

  1. python中的not的意思

    python中的not的意思 在python中,not是逻辑判断,用于布尔值true和false,not true是false,not false是true.以下是not的一些常见用法:(1)当表达式 ...

  2. Spring之XML解析

    XML解析,我们可以通过我们常用的以下代码作为入口 也许,我们习惯使用第一种加载方式,但是以前也存在 第二种加载,并且这两种加载也有差别,下面再来分析. 先分析 第二种 使用 BeanFactory ...

  3. libusb移植

    下载 https://sourceforge.net/projects/libusb/ 编译 # ./configure --build=i686-linux --host=arm-linux --p ...

  4. CHD-5.3.6集群安装

    我是基于Apache-hadoop2.7.3版本安装成功后,已有的环境进行安装chd-5..6 已用的环境: JDK版本: java version "1.8.0_191" Jav ...

  5. vim学习(一)

    vim是linux和mac中常用到的编辑器. 其分为4种模式: normal模式:普通模式,浏览作用 insert模式: i(insert)     在当前光标处进行插入 a(append) 在当前光 ...

  6. CAFFE(FAQ.1):Ubuntu 配置caffe 框架之数据库读取错误:ImportError: No module named lmdb解决办法

    Z: 在安装了caffe框架后需要读取大量的数据进行学习训练.比如在MNIST识别训练中,一般直接读图片会比较耗时,我们一般将图片转存为数据库中.目前主流的数据库有以下两种选择: LevelDB Lm ...

  7. LintCode上的一道算法面试题: 数字的统计

    说到数字的统计,小时候的数学课大家都应该有学过,但数字太多太复杂的,手动肯定耗时间不说还很容易出错.所以今天分享一下如何用程序来完成. Have you met this question in a ...

  8. 为什么Microsoft Office 2016安装时不能自选安装组件和安装路径?

    使用特别版本的安装镜像文件 SW_DVD5_Office_Professional_Plus_2016_64Bit_ChnSimp_MLF_X20-42426.iso,请自行搜索和下载 文件: SW_ ...

  9. PLSQL打开文件中文出现乱码

    假定数据库使用的是:American_America.AL32UTF8字符集. 查询方式:SELECT * FROM v$nls_parameters ; 查看NLS_CHARACTERSET 的值是 ...

  10. Java8-Stream-No.09

    import java.util.Arrays; public class Streams9 { public static void main(String[] args) { Arrays.asL ...