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

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

1. 安装

npm install nprogress --save

2. 在main.js中导入

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

// 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/>'
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

  • Vue实现带进度条的文件拖动上传功能

    Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • vue 页面加载进度条组件实例

    页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计.另外,我们不可能监控到所有资源的加载情况. 事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的.所以没我们需要去"模拟"

  • Vue进度条progressbar组件功能

    效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部

  • vue环形进度条组件实例应用

    在做项目的时候,最好只使用一套组件库,但是很多时候我们的组件库里面没有我们需要的组件,这个时候我们还是需要自己写组件了,vux里面就没有环形进度条组件,所以需要自己写一个. 查找资料后发现了一个很好的实现方式,通过svg来实现,以前的时候学过一点svg但是没有怎么深入了解过...现在看来真是罪过,给出参考链接 https://segmentfault.com/a/1190000008149403 可以看出原作者使用了两种方式,我们选择了第二种,简单,而且好扩展.可以看到svg就想是canvas一

  • vue组件实现进度条效果

    vue组件实现进度条效果

    本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下 一.效果图 二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{

  • Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

    一.格式化时间 效果图: 实现上述界面代码如下: data() { return { loading: false, demandData: [], demandcount: 0,//总条数 skip: 0, //分页 pageSize: this.LIMIT, columns: [ { title: '编号', width: 60, align: 'center', type: 'index' }, { title: '标签名称', key: 'd_title' }, { title: '创建

  • vue柱状进度条图像的完美实现方案

    前言 本文是对bar进度条实现的2种方案进行分享,第一种是很简单,纯css的实现,第二种是echart的实现. css的实现 css实现很简单.代码如下: <template> <div class="haoroomflex"> <div v-for="(item,index) in barData" :key="index" class="onebar"> <div class=&q

  • Vue使用NProgress进度条的方法

    本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • vue实现简单loading进度条

    刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级. 一.进度条原理 这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条.主要是让进度条的width不断增加至100%就可以啦~好了,进入正题. 二.jquery实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • vue开发拖拽进度条滑动组件

    vue开发拖拽进度条滑动组件

    分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强! 效果图如下: 调用组件如下: <slider :min=0 :max=100 v-model = "per"></slider> <template> <div class="slider" ref="slider"> <div class="process"

  • vue2.0实现音乐/视频播放进度条组件

    vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

随机推荐