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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
用PHP4访问Oracle815
2006/10/09 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python聊天室实例程序分享
2016/01/05 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
快速了解Python中的装饰器
2018/01/11 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
《影子》教学反思
2014/02/21 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
教师职位说明书
2014/07/29 职场文书
租房协议书
2014/09/12 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
团员自我评价范文
2015/03/10 职场文书
2016年教师节慰问信
2015/12/01 职场文书
银行工作心得体会范文
2016/01/23 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
MySQL中一条update语句是如何执行的
2022/03/16 MySQL