vue使用nprogress实现进度条


Posted in Javascript onDecember 09, 2019

本文实例为大家分享了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();
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 #Javascript
vue vant Area组件使用详解
Dec 09 #Javascript
JS中的模糊查询功能
Dec 08 #Javascript
详解一些适用于Node.js的命名约定
Dec 08 #Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 #Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 #Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 #Javascript
You might like
php 变量定义方法
2009/06/14 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
九州传奇上机题
2014/07/10 面试题
大学生个人推荐信范文
2013/11/25 职场文书
上课打牌的检讨书
2014/02/15 职场文书
投资合作协议书范本
2014/04/17 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
北京申奥口号
2014/06/19 职场文书
先进党支部事迹材料
2014/12/24 职场文书
公司更名通知函
2015/04/24 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers