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 相关文章推荐
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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
PHP安全配置
2006/12/06 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript闭包的理解
2015/04/01 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python单链表的简单实现方法
2014/09/23 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
干部行政关系介绍信
2014/01/17 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
科研课题实施方案
2014/03/18 职场文书
财产保全担保书范文
2014/04/01 职场文书
留守儿童工作方案
2014/06/02 职场文书
个人先进事迹总结
2015/02/26 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
python 离散点图画法的实现
2022/04/01 Python