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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
vue 数据操作相关总结
Dec 17 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
php flush类输出缓冲剖析
2008/10/19 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
浅析php header 跳转
2013/06/17 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP代码加密的方法总结
2020/03/13 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python操作oracle的完整教程分享
2018/01/30 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python request post上传文件常见要点
2020/11/20 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
幼儿园端午节活动方案
2014/08/25 职场文书
医药销售自我评价200字
2014/09/11 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python