标签：loading js 守卫 Loading nprogress 使用 路由
# https://www.npmjs.com/package/nprogress
pnpm i nprogress
// main.js
import 'nprogress/nprogress.css'
// App.vue 自定义一下loading的滚动条样式
<style>
#nprogress .bar {
background: #f4f4f4!important;
height: 3px!important;
}
</style>
// util.js 滚动条全局工具
// 显示全屏Loading
export function showFullLoading(){
nProgress.start()
}
// 隐藏全屏Loading
export function hiddeFullLoading(){
nProgress.done()
}
// permission.js 通过路由守卫完成
// 前置路由守卫开启loading
router.beforeEach(async (to, from, next) => {
// 切换路由显示Loading
showFullLoading()
// 全局后置守卫，渲染完网页之后终止loading
router.afterEach((to, from) => hiddeFullLoading())
标签：loading,
js,
守卫,
Loading,
nprogress,
使用,
路由
From： https://www.cnblogs.com/leoshi/p/17329043.html