在vue中使用nprogress
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的更多相关文章
- Vue中使用NProgress实现进度条
简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...
- 在vue项目中使用Nprogress.js进度条
NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...
- NProgress颜色的修改以及在Vue中的使用
一.NProgress的作用是在站内进行页面之间的跳转的时候,在浏览器的顶部显示一个进度,使用非常简单,可以在百度一下. 二.如何修改NProgress默认的进度条颜色?如下图,修改为自己想要的颜色即 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
随机推荐
- 洛谷 P2867 [USACO06NOV]大广场Big Square
P2867 [USACO06NOV]大广场Big Square 题目描述 Farmer John's cows have entered into a competition with Farmer ...
- 程序猿的量化交易之路(14)--Cointrader数据表(2)
Cointrader表结构 转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrader.top 设置(se ...
- 使用 Bluemix™ Live Sync 高速更新 Bluemix 上执行的应用程序实例
假设您要构建 Node.js 应用程序,那么能够使用 IBM® Bluemix® Live Sync 高速更新 Bluemix 上的应用程序实例,并像在桌面上进行操作一样进行开发,而无需又一次部署.执 ...
- gullo.me 的 natvps
gullo.me 的 natvps 1. 在下面的地址中输入内网 IP,查看许可的网络资源 https://hosting.gullo.me/plugin/support_manager/knowle ...
- scrollBarStyle- listview滑动条调整
今天在解决问题的时候,需要设置listview滚动条,使listview的内容不能被滚动条覆盖 后来发现网上提到一个 ScrollView 属性.ScrollView中ScrollBar的style ...
- 28.Node.js 函数和匿名函数
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...
- 使用缓存Memcache存储更新微信access token
关键字:Memcache access_token 更新 存储 7200 本文介绍如何使用缓存Memcache存储及更新 access token的方法. 一.Access Token access_ ...
- golang中new和make区别
golang 中有两个内存分配机制 :new和make,二者有明显区别. new:用来初始化一个对象,并且返回该对象的首地址.其自身是一个指针.可用于初始化任何类型 make:返回一个初始化的实例,返 ...
- (转)Tomcat目录结构
首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...
- oracle 归档模式和非归档模式
http://www.cnblogs.com/gaojian/p/3611641.html http://blog.csdn.net/yong5241200/article/details/39451 ...