vue 插件案例

VUE----页面加载进度条

2020-10-15  本文已影响0人  JuMinggniMuJ

我测试使用的是脚手架2
有的时候当我们页面请求数据较慢的时候,我们就需要让页面有个加载进度条,让用户体验感更加友善

1.下载nprogress:
npm install nprogress --save
2.路由文件中引入:
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' //这个样式必须引入
3.路由守卫钩子函数中触发使用:
1.加载进度条:
    router.beforeEach((to,from,next)=>{
        NProgress.start()
        next()
    })
2.页面加载完成关闭进度条:
    router.afterEach((to, from) => {
        NProgress.done()
    })
4.进度条的基本使用就完成了。
上一篇 下一篇

猜你喜欢

热点阅读