NProgressは細身でGoogleは、YouTubeに触発され、非常に軽い、非常に使いやすいページツールの上部にあるプログレスバーを追加することです。
1、インストール
$ 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()
})
使用して、ページジャンプルーティングで
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は、色が変更NProgressを使う
のスタイルでApp.vueに増加します:
<style>
#nprogress .bar {
background: red !important; //自定义颜色
}
</style>