Vue adds a page-loading progress bar using NProgress

1, install,

npm install --save nprogress
Copy the code

2. Import in main.js

import NProgress from 'nprogress'; / / the progress bar
import 'nprogress/nprogress.css'; // This style must be introduced


NProgress.inc(0.2);// Increments the progress bar
NProgress.configure({ easing: 'ease'.speed: 500.showSpinner: false });

1.If you want to redirect a route to progress, add router. BeforeEach and afterEach to vue-router. BeforeEach ((to,from,next) = > {
  NProgress.start() 
  next()
})

router.afterEach(() = > {
  NProgress.done()
})
Copy the code

3. Modify the progress bar color

Add style in app.vue:

<style>
#nprogress .bar {
  background: blue ! important; } </style>Copy the code