NProgress的官网:http://ricostacruz.com/nprogress/        源码地址:https://github.com/rstacruz/nprogress

1、安装

$ npm install --save nprogress

2、在main.js中引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3、在main.js中使用

NProgress.configure({ showSpinner: true });
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
sessionStorage.removeItem('user');
}
let user = JSON.parse(sessionStorage.getItem('user'));
if (!user && to.path != '/login') {
next({ path: '/login' })
} else {
NProgress.start();
next()
}
}) router.afterEach(transition => {
NProgress.done();
});

在vue中使用nprogress的更多相关文章

  1. Vue中使用NProgress实现进度条

    简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...

  2. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  3. NProgress颜色的修改以及在Vue中的使用

    一.NProgress的作用是在站内进行页面之间的跳转的时候,在浏览器的顶部显示一个进度,使用非常简单,可以在百度一下. 二.如何修改NProgress默认的进度条颜色?如下图,修改为自己想要的颜色即 ...

  4. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  5. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  7. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  8. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  9. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

随机推荐

  1. Android学习笔记进阶19之给图片加边框

    //设置颜色 public void setColour(int color){ co = color; } //设置边框宽度 public void setBorderWidth(int width ...

  2. php课程 12-38 php的类的构造方法和析构方法怎么写

    php课程 12-38 php的类的构造方法和析构方法怎么写 一.总结 一句话总结:a.__construct(参数){},__destruct(){},b.如果类中的一个方法和类名相同,则该方法为构 ...

  3. 团队作业-Beta冲刺(3)

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  4. Javascript 6 种继承

    1.原型链继承 // 1.原型链继承的两个问题===>在借用构造函数中可以解决下下面的两个问题//problem: 在创建子类型的实例时,不能向超类型的实例传递参数(在这里就是不能向A()里传递 ...

  5. 【2017"百度之星"程序设计大赛 - 初赛(B)】Chess

    [链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=776&pid=1001 [题意] 在这里写题意 [题 ...

  6. 设计模式之十二:状态模式(State)

    状态模式: 当一个对象的内部状态发生变化时同意改变它的行为. Allow an object to alter its behavior when its internal state changes ...

  7. SICP 习题 (2.10)解题总结: 区间除法中除于零的问题

    SICP 习题 2.10 要求我们处理区间除法运算中除于零的问题. 题中讲到一个专业程序猿Ben Bitdiddle看了Alyssa的工作后提出了除于零的问题,大家留意一下这个叫Ben的人,后面会不断 ...

  8. PMP杂谈--名词解释

    过程:PMP中常常提到过程,好像非常高大上,实则不然,过程说白了就是一系列的行动和活动,用来创建预定的产品,服务或成果. 就这么简单. 再深入点就是,行动和活动当然都会有ITTO(输入,工具和技术.输 ...

  9. 转linux文件的读写

    转自 http://www.open-open.com/lib/view/open1474356438277.html 缓存 缓存是用来减少高速设备访问低速设备所需平均时间的组件,文件读写涉及到计算机 ...

  10. docker第一章

    简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...