简介: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