vue-router结合顶部进度条NProgress的使用

简介：顶部进度条，切换路由加载页面的一个进度情况的展示

使用

1、安装插件

npm install nprogress -S

2、使用

// 在路由守卫拦截中引入
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar styleNProgress.configure({ showSpinner: false }) // 禁⽤进度环 若为true右侧会出现一个进度环
// 路由跳转前
router.beforeEach(async (to, from, next) => {NProgress.start()// 开始进度条next()//.....其他代码
})
// 路由跳转后
router.afterEach(() => {NProgress.done()// 结束进度条
})

3、更改样式
在全局css或者app.vue中添加如下代码，即可修改颜色

#nprogress .bar {background:#ff6454 !important; // 自定义颜色height: 10rpx !important;        // ⾼度
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！