如何通过Vue集成NProgress实现页面加载进度条显示？

本文共计341个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家分享了Vue使用NProgress进度条的具体代码，供大家参考。具体内容如下：+1. 安装npm install i -S nprogress

2.在router.js中使用

import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'

改写后：本文提供Vue集成NProgress进度条的相关代码示例，方便大家学习。具体步骤包括：

1.安装NProgress

运行：npm install i -S nprogress

2.路由配置

在router.js文件中，导入Vue、Router和NProgress：import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'

本文实例为大家分享了Vue使用NProgress进度条的具体代码，供大家参考，具体内容如下

1、安装

npm i -S nprogress

2、在router.js中使用

import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({ mode: 'history', routes: [ ] }) router.beforeEach((to, from, next) => { NProgress.start() /// code }) router.afterEach(() => { NProgress.done() })

3、nprogress的z-index

假如你的header比nprogress的高，可能看不见进度条，可以采用这个办法实施,其中数字比header高就行，或者，你改header的z-index

#nprogress { .bar { z-index: 15031; } .spinner { z-index: 15031; } }

4、nprogress修改颜色

#nprogress .bar { background: red !important; //颜色可修改 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。