300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue项目中使用NProgress进度条

vue项目中使用NProgress进度条

时间:2023-10-17 12:41:16

相关推荐

vue项目中使用NProgress进度条

NProgress是页面跳转时出现在浏览器顶部的进度条,如下所示:

​​​​​​​

使用起来非常简单;

安装

npm install nprogress --save

使用

主要用到两个代码:

NProgress.start(); // 路由进入之前NProgress.done(); // 路由进入之后

使用时在路由的index.js文件中,先导入,再使用:

//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'router.beforeEach((to, from, next) => {NProgress.start()next()})router.afterEach(() => {NProgress.done()})

修改进度条样式

只需在app.vue样式中添加如下代码即可:

#nprogress .bar {background: red !important; //自定义进度条颜色}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。