Vue's method of using NProgress progress bar

This article shares the specific code of Vue's NProgress progress bar for your reference. The specific content is as follows

1. Installation

npm i -S nprogress

2. Use in

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


(Router)

const router = new Router({
 mode: 'history',
 routes: [
 ]
})

((to, from, next) => {
 ()
 /// code
})
(() => {
 ()
})

3. nprogress's z-index

If your header is higher than nprogress, you may not see the progress bar. You can use this method to implement it, where the number is higher than the header, or you can change the header's z-index

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

4. nprogress modify color

#nprogress .bar {
  background: red !important; //The color can be modified}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.