如何在Vue项目中给路由跳转加上进度条
1.前言
在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示)。虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验。本篇文章就来教你如何在Vue项目中实现这样的进度条。
2.安装Nprogress
虽然我们也可以自己手动实现这样的功能,但是,nprogress.js
已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦!
npm install nprogress -S
3.在router.js中引入Nprogress
由于我们需要将Nprogress
绑定在路由钩子上,所以我们直接在路由文件router.js
中引入Nprogress
。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'// nprogress样式文件
4.绑定路由钩子
我们想要的效果是:当路由开始跳转时加载进度条,当路由跳转完毕时进度条加载完毕。幸运的是,在Vue中刚好为我们提供了路由开始跳转和结束跳转的钩子,我们只需在引入Nprogress
之后,将其绑定在路由钩子上即可。代码如下:
//当路由开始跳转时
router.beforeEach((to, from , next) => {
// 开启进度条
NProgress.start();
// 这个一定要加,没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
next();
});
//当路由跳转结束后
router.afterEach(() => {
// 关闭进度条
NProgress.done()
})
5.效果图
6.个性化配置
当然如果你对默认的进度条外观样式不满意,Nprogress
还提供了个性化配置外观。
NProgress.configure({
easing: 'ease', // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比
})
7.完整代码示例
完整代码示例请戳☞☞☞nprogresBar
(完)
免责声明
- 本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。
- 博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。
- 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
- 博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!
posted on 2018-12-23 01:56 难凉热血,码梦为生! 阅读(2738) 评论(0) 编辑 收藏 举报