vue使用nprogress实现进度条
本文实例为大家分享了vue使用nprogress进度条展示的具体代码，供大家参考，具体内容如下
安装
npminprogress-S
使用
在main.js中
importNProgressfrom'nprogress'
import'nprogress/nprogress.css'
//使用钩子函数对路由进行权限跳转
router.beforeEach((to,from,next)=>{
constrole=localStorage.getItem('ms_username');
if(!role&&to.path!=='/login'){
next('/login');
}elseif(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();
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。