vue使用nprogress实现进度条
更新时间：2019年12月09日 08:37:39 作者：adley_app
这篇文章主要为大家详细介绍了vue使用nprogress实现进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用nprogress进度条展示的具体代码，供大家参考，具体内容如下
安装
npm i nprogress -S
使用
在main.js中
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
NProgress.start();
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{
// 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
confirmButtonText: '确定'
});
}else{
NProgress.start();
next();
}
}
})
router.afterEach(transition => {
NProgress.done();
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue监听屏幕尺寸变化问题,window.onresize很简单
这篇文章主要介绍了vue监听屏幕尺寸变化问题,window.onresize很简单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
下面小编就为大家带来一篇Vue-resource拦截器判断token失效跳转的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue + elementUI实现省市县三级联动的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
Vue中"This dependency was not found"问题的解决方法
这篇文章主要介绍了Vue中"This dependency was not found"的问题的解决方法,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要给大家介绍了关于在vue3.0中如何友好使用antdv的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了Vue实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
这篇文章主要介绍了Vue-Router的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论