在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 ...
随机推荐
- 03011_预处理对象executeUpdate方法(实现数据库的增、删、改)
1.概述 (1)通过预处理对象的executeUpdate方法,完成记录的insert\update\delete语句的执行: (2)操作格式统一如下: ①注册驱动: ②获取连接: ③获取预处理对象: ...
- 高速入手ITOO导入-改进导入.xlsx格式
这两天一直在研究师哥的导入,在他的基础上进行了一些改进.这次的改进就是能够导入还有一种格式.xlsx格式的.经过几番调试和看师哥写的底层代码最终知道哪里的问题了. workbook = new HSS ...
- 堆-heap
#include <vector> #include <cstdio> using namespace std; class Heap { private : vector&l ...
- 热点共享SS网络
# 测试系统: Ubuntu 16.04 LTS-lxde-ARM # ***-libev 安装脚本源于 秋水逸冰: https://teddysun.com/358.html # ss-tproxy ...
- js34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- JSTL之C标签学习
JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...
- Lightoj 1043 - Triangle Partitioning【二分】
题目链接:http://lightoj.com/volume_showproblem.php? problem=1043 题意:一个三角形ABC,DE//BC.已知三角形ADE和四边形BDEC的面积的 ...
- php网页跳转无法获取session值
今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...
- MSDN上的异步socket 服务端例子
MSDN上的异步socket 服务端例子 2006-11-22 17:12:01| 分类: 代码学习 | 标签: |字号大中小 订阅 Imports SystemImports Syste ...
- C# 文件转byte数组,byte数组再转换文件
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...