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. 【Uva 10163】Storage Keepers

    [Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...

  2. 运行 CMD 时,參数加引號常见问题

    在调用 CMD 时.如脚本中用 WScript.Shell 调用. 假设參数中有包括空格的长路径名时,必需要加引號才干正确被识别. 是的,大家都知道要加引號.但怎么加却easy被误解.这个问题,不时地 ...

  3. 利用zip格式实现手机客户端二维码扫描分享识别

    场景: 用户A想要将某应用推荐给用户B,用户B扫描用户A的手机app中的二维码进行下载和安装, 并且需要识别用户B是扫描了用户A的二维码,进而给用户A一定的奖励. (例如:健一网app) zip格式: ...

  4. worktools-git 工具的使用总结(3)

    1.标签的使用,增加标签 git tag 1.0 branch_name zhangshuli@zhangshuli-MS-:~/myGit$ git br -av parent e2e09c4 so ...

  5. ::的类名前有个 & ,什么意思?

    转载自  http://www.imooc.com/qadetail/93985 MazePerson &MazePerson::setPersonPosition(int coordinat ...

  6. SqlParameter的用法

    SqlParameter的用法 关于Sql注入的基本概念,相信不需多说,大家都清楚,经典的注入语句是' or 1=1--单引号而截断字符串,“or 1=1”的永真式的出现使得表的一些信息被暴露出来,如 ...

  7. C# 报表

    报表技术 1.OWC控件的使用 OWC是office web Components 是组件对象模型(COM)控件的集合,可用于将电子表格,图表和数据库发布到网站上. 在Office2003以后的版本中 ...

  8. Android---- 获取当前应用的版本号和当前android系统的版本号

    Android 应用程序获得版本号 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取 ...

  9. Dcloud课程7 单例模式一般用在什么场景

    Dcloud课程7 单例模式一般用在什么场景 一.总结 一句话总结:连接数据库,这样就保证了和数据之间只有一个连接,从而能够不占用多余资源,这样就极大的减少了资源浪费,减少了mysql或者说服务器压力 ...

  10. python中数据结构

    列表:数组,矩阵 元组 映射:字典 集合