nprogress页面加载进度条

安装

npm install --save nprogress

 

使用

NProgress.start(); // 开始
NProgress.done(); // 结束

 

在vue项目路由中使用

import Vue from 'vue'
import VueRouter from 'vue-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
})

router.beforeEach((to, from, next) => {
	NProgress.start()
	next()
})

router.afterEach(() => {
	NProgress.done()
})


export default router

 

更多配置信息戳这里