vue路由进度条
cnpm install --save nprogress
//安装并引入样式
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'
//初始化展示为false
NProgress.configure({ showSpinner: false }) // NProgress Configuration
//路由守卫
router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
if (to.path === loginRoutePath) {
localStorage.removeItem('tenant')
localStorage.removeItem('user-session')
localStorage.removeItem('wxtoken')
localStorage.removeItem('Access-Token')
sessionStorage.clear();
next()
NProgress.done()
}
})
//路由跳转结束
router.afterEach(() => {
NProgress.done() // finish progress bar
})
效果图
![加载进度条](https://img-blog.csdnimg.cn/d1d40520170f425382a55b1af6f06e95.png)