vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条

简介：NProgress 是浏览器加载时，出现在浏览器顶部的进度条。

文章目录：

一、NProgress 安装

二、NProgress 使用

三、NProgress 配置

四、Vue 中修改进度条颜色

一、NProgress 安装

1、使用 npm 或者 yarn 安装及可

npm install --save nprogress

yarn add nprogress

任选一种安装

2、用法

NProgress.start(); //进度条出现

NProgress.done(); //进度条消失

二、NProgress 使用

1、路由文件中导入，页面跳转出现进度条

入口文件 main.js 引入 nprogress

import App from './App'

import VueRouter from 'vue-router'

import router from './router' // 路由配置文件

//引入 nprogress

import NProgress from 'nprogress' // 进度条

import 'nprogress/nprogress.css' // 引入样式

Vue.use(VueRouter)

// 简单配置

NProgress.inc(0.2)

NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

// 进度条开始

ro