NProgress is a slender add a progress bar at the top of the page tool, very light, very easy to use, inspired by Google, YouTube.
1, the installation
$ npm install --save nprogress 或者
$ yarn add nprogress
//用法
NProgress.start();
NProgress.done();
2,
router.js
//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
In routing the page jump using the
same in the main.js
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
sessionStorage.removeItem('username');
}
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') {
next({path: '/login'})
} else {
NProgress.start();
next()
}
});
router.afterEach(transition => {
NProgress.done();
});
3.Vue use NProgress modify the colors
increase in App.vue in the style of:
<style>
#nprogress .bar {
background: red !important; //自定义颜色
}
</style>