vue loading进度条,
本文主要介绍了在Vue中实现nprogress页面加载进度条。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
nprogress页面加载进度条
前言
很多时候，在访问一个网页的时候，我们总是看到页面正在加载，却不知道需要多长时间。无限等待总是让人烦躁，所以我们希望知道网页加载的进度，这样才能知道是否继续等待页面加载。我们可以依靠nprogress来实现这个功能。它是一个轻量级的进度条组件，易于使用，可以很容易地集成到应用程序中。
安装nprogress
直接在项目中执行安装命令：npm install --save nprogress
nprogress方法
NProgress.start() //进度条开始
NProgress.set() //将进度设置到特定的百分比位置，取值范围为0到1.0。
NProgress.inc() //如果进度增加一点点，永远不会是100%的进度
NProgress.done() //进度条结束并消失。
NProgress.configure() //进度条参数配置
全局引入nprogress
在main.js中引入nprogress插件和样式，
从“nprogress”//n progress插件导入n progress
导入 n progress/n progress . CSS //n progress样式
配置nprogress
在NProgress.configure({})中，我们可以适当配置NProgress，用showSpinner false(禁用进度循环)、trick false(关闭进度条步进)、trickleRate(每步增加多少)、trickleSpeed(步进间隔，单位毫秒ms)、ease(动画方向)和Speed(动画速度，单位毫秒ms)。
nprogress . configure({ show spinner:false })//我只在这里关闭进度循环。
Vuerouter路由钩子
在添加nprogress之前，我们需要知道每个Vuerouter前后的钩子函数。这是路由在跳转时受到某种权限判断或其他操作时定义的处理函数。Vue。beforeEach在跳转之前执行，Vue.afterEach在跳转之后执行。
vue.before each (function (to，form，next) {})函数有三个参数，Vue.afterEach(function(to，form))函数有两个参数：
收件人：传入的路由对象
From:当前导航离开的路线对象。
Next:调用此方法进入下一个钩子函数，next(false):中断当前导航。
在路由中添加nprogress
在main.js中，全局钩子函数在路由跳转前以NProgress.start()开始，在路由跳转后以NProgress.done()结束，这样在路由跳转时你就可以在页面顶部看到一个进度条进度条。
从“vue”导入Vue
从导入应用程序。/App.vue
从 @/router/index.js 导入路由器
从导入存储。/商店
从“元素-用户界面”导入元素
导入 element-ui/lib/theme-chalk/index . CSS
导入 @/assets/icons/index.js
从“NProgress”导入nprogress
导入 nprogress/nprogress.css
Vue.use(元素)
Vue.config.productionTip=false
nprogress . configure({ show spinner:false })
router.beforeEach((收件人，发件人，下一个)={
NProgress.start()
下一个()
})
router.afterEach(()={
NProgress.done()
})
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
在请求中添加nprogress
如果希望每次发送请求时都出现进度条，可以在axios包中的路由拦截中添加nprogress。
//请求拦截器(在发出请求之前处理一些请求)
axios.interceptors.request.use(
NProgress.start()
})
//响应拦截器(处理响应数据)
axios . interceptors . response . use(
NProgress.done()
)
为了让结构更流畅、更清晰、更简洁，我们来重新排列一下代码，即nprogress主要用于路由跳转。这里我把nprogress放入路由器，记得在实例化路由器后调用Vue路由器的beforeEach和afterEach钩子函数生效。
从“vue”导入Vue
从“vue路由器”导入路由器
从导入路由器。/路由器
从“NProgress”导入nprogress
导入 nprogress/nprogress.css
nprogress . configure({ show spinner:false })
Vue.use(路由器)
常量路由器=新路由器({
模式：“历史”，
路由：路由器
})
导出默认路由器
router.beforeEach((收件人，发件人，下一个)={
NProgress.start()
下一个()
})
router.afterEach(()={
NProgress.done()
})
修改nprogress样式
在app.vue中添加如下样式即可修改nprogress样式，记得添加 !important来覆盖原有样式
# n进展。酒吧
背景：#66B1FF！重要；//自定义颜色
高度：20px！重要；//自定义高度
}
参考https://www.toutiao.com/i6718992880599302659/? group _ id=6718992880599302659
关于Vue中nprogress页面加载进度条的方法这篇文章到此为止。有关在Vue nprogress中加载进度条的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。