在vue中页面加载进度条实现nprogress

下载npm i nprogress或者 pnpm i nprogress或者cnpm i nprogress等

用法：

        

当然这个文件也要引入到main.js中
import router from "@/router/index.ts";
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
//全局守卫：项目当中任意路由切换都会触发的钩子
//全局前置守卫
router.beforeEach((to:any,from:any,next:any)=>{
    //to:
    nprogress.start()
    next()
})

//全局后置守卫
router.afterEach((to:any,from:any)=>{
    nprogress.done()
})

 

 如果想修改进度条的颜色可以在node_module下的nprogress下的nprogress.css