安装

将nprogress.js和nprogress.css添加到项目中。

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

NProgress可通过bower和npm获得。

$ npm install --save nprogress

也可通过unpkg CDN:

https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css

基本用法

只需调用start()和done()来控制进度条。

NProgress.start();
NProgress.done();

vue实例

代码中带注释

import Vue from "vue";
import router from "./router";
import store from "./store";
import NProgress from "nprogress"; // 进度条
import "nprogress/nprogress.css"; // 进度条样式
import getPageTitle from "@/utils/get-page-title";
import { getRefreshToken } from "@/utils/token";NProgress.configure({ showSpinner: false }); // NProgress配置const whiteList = ["/login",
]; // 重定向白名单router.beforeEach(async (to, from, next) => {// 开始进度条NProgress.start();// 设置页面标题document.title = getPageTitle(to.meta.title);// 判断用户是否已登录let bearerToken = localStorage.getItem("bearer_token") || "";if (bearerToken) {if (to.path === "/login") {// 如果已登录，则重定向到主页next({ path: "/" });Vue.prototype.$message.success("您已登录");NProgress.done();} else {const hasGetUserInfo = store.getters.name;if (hasGetUserInfo) {next();} else {try {// 获取用户信息,若获取不到，在getInfo方法内提示用户重新登录await store.dispatch("user/getInfo");next();} catch (error) {// 删除令牌并转到登录页面重新登录let refreshToken = localStorage.getItem("refresh_token") || "";// 尝试刷新 token//getRefreshToken 方法刷新tokenif (refreshToken.length !== 0) {let refreshToken = await getRefreshToken();localStorage.setItem("refresh_token", refreshToken);next();} else {Vue.prototype.$message.error(error || "Has Error");//重定向到登录页面next(`/login?redirect=${to.path}`);}NProgress.done();}}}} else {/*没有令牌*/if (whiteList.indexOf(to.path) !== -1) {//在免登录白名单中，直接进入next();} else {//其他没有权限访问的页面重定向到登录页面。next(`/login?redirect=${to.path}`);NProgress.done();}}
});router.afterEach(() => {//完成进度条NProgress.done();
});

加载条nprogress配置相关推荐

Spring Cloud Alibaba基础教程：Nacos配置的多文件加载与共享配置
<Spring Cloud Alibaba基础教程>连载中,关注我一起学期!前情回顾: <使用Nacos实现服务注册与发现> <支持的几种服务消费方式> <使 ...
配置文件加载位置||外部配置加载顺序||自动配置原理
配置文件加载位置 SpringBoot会从这四个位置全部加载主配置文件:互补配置: 外部配置加载顺序自动配置原理 1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置 ...
一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
制作一个大风车加载条
一.前言不想使用普通的那种转圈的加载条,所以找了一个大风车的图片,想要用旋转的大风车来表示加载中. 一般都会想着将大风车图片设置成ImageView组件,然后给这个组件添加一个旋转动画就可以了,但是 ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条
可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...
纯css炫酷动态加载条
模仿windows风格的动态加载条,目前颜色更宽度是写死的,没有用clac的原因是因为它会跑得太原获取的100%是窗口宽度而不是父div宽度. <!DOCTYPE html> <ht ...
Node.js项目中动态加载环境变量配置
NODE_MODULES:项目中动态加载环境变量配置开始在平时的 Node.js 项目开发中,我们需要在项目中添加各种各样的配置:服务端口.服务地址.图片上传.数据库.Redis 等等. 通常情况 ...
实现阮一峰ES6的顶部加载条效果
效果例子阮一峰的ES6:http://es6.ruanyifeng.com/?search=s&x=13&y=3 html + css <style type="te ...

加载条nprogress配置

文章目录

安装

基本用法

vue实例

加载条nprogress配置相关推荐

最新文章

热门文章