Vue中nprogress页面加载进度条的方法实现

1
2
3
4
5
NProgress.start() // 进度条开始
NProgress.set() // 将进度设置到具体的百分比位置，取值范围是0到1.0
NProgress.inc() // 如果少量增加进度，进度将永远不会得到100%
NProgress.done() // 进度条结束消失
NProgress.configure() // 进度条参数配置

1
2
import NProgress from ‘nprogress' // nprogress插件
import ‘nprogress/nprogress.css' // nprogress样式

1
NProgress.configure({ showSpinner: false }) //我这里只关闭进度环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
// 请求拦截器(请求发出前处理一些请求)
axios.interceptors.request.use( 
 NProgress.start()
})
// 响应拦截器（处理响应数据）
axios.interceptors.response.use(
 NProgress.done()
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
 mode: 'history',
 routes: routers
})
export default router
 
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})

1
2
3
4
#nprogress .bar {
 background: #66B1FF !important; // 自定义颜色
 height: 20px !important; // 自定义高度
 }