vue配置nprogress实现页面顶部进度条


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下

1. 安装

npm install nprogress --save

2. 在main.js中导入

vue配置nprogress实现页面顶部进度条

源码~~~~~~方便你复制 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import moment from './plugins/moment'
import axios from './plugins/axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { base } from './router/config'
 
Vue.use(iView)
Vue.use(moment)
Vue.use(axios)
 
Vue.config.productionTip = false
 
// 配置NProgress进度条选项 —— 动画效果
NProgress.configure({ ease: 'ease', speed: 500 })
 
// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
 if (to.path === `${base}login`) {
 return next()
 }
 
 // token验证,如果存储在sessionStorage里的auth的值丢失,就回到登陆页面,(开发时可以注释掉)
 // if (!sessionStorage.getItem('auth')) {
 // return next(`${base}login`)
 // }
 
 // 如果页面在 / 默认页面,跳转到登陆页面(和vue路由重定向功能类似)
 if (to.path === `${base}`) {
 return next(`${base}login`)
 }
 // NProgress开始进度条
 NProgress.start()
 next()
})
 
// 全局后置钩子-常用于结束动画等
router.afterEach(transition => {
 // NProgress结束进度条
 NProgress.done()
 // console.log(transition)
})
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

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

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
javascript 日期常用的方法
Nov 11 Javascript
一个简单的js树形菜单
Dec 09 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
Vue使用NProgress进度条的方法
Sep 21 #Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 #Javascript
vue开发拖拽进度条滑动组件
Sep 21 #Javascript
layui点击弹框页面 表单请求的方法
Sep 21 #Javascript
使用vue制作滑动标签
Sep 21 #Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
You might like
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
js实现车辆管理系统
2020/08/26 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python判断自身是否正在运行的方法
2019/08/08 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
晨会主持词
2014/03/17 职场文书
网络管理员岗位职责
2014/03/17 职场文书
淘宝活动总结范文
2014/06/26 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS