实现效果:


1、安装
NProgress可以通过npm安装

npm install --save nprogress
2、在index.ts中配置

javascript
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'
NProgress.configure({
ease: "ease",
speed: 500,
})
javascript
//路由前置守卫
router.beforeEach((to, from, next) => {
// console.log(to)
NProgress.start()
})
//路由后置守卫
router.afterEach((to, from) => {
// console.log(to)
NProgress.done()
})