vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue NProgress

Vue使用NProgress实现页面顶部的进度条显示效果

作者:落雪小轩韩

这篇文章主要介绍了vue Nprogress页面顶部进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条,本文通过实例代码给大家讲解,需要的朋友可以参考下

一、安装

npm i nprogress -S

二、常用配置项

1、递增进度条

以随机量递增,将其用于加载

NProgress.inc()

如果要增加特定值,可以将其作为参数传递

NProgress.inc(0.2)

2、动画设置

使用缓动(CSS缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认:ease和200)

NProgress.configure({ easing: ‘ease’, speed: 400 })

通过将加载微调器设置为false来关闭它。(默认值:true)

NProgress.configure({ showSpinner: false })

三、使用

在main.js中引入样式

import 'nprogress/nprogress.css'

它默认显示为蓝色进度条,如果想自定义进度条颜色,可在全局css中或在app.vue下写入自己自定义的css样式;

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #e2e2e2 !important; 
  }
</style>

在路由文件router文件夹的index.js文件中

//引入nprogress 进度条插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
Vue.use(VueRouter)
// 配置进度条
NProgress.inc()
NProgress.configure({ showSpinner: false })
const routes = [{...}]
const router = new VueRouter({
  routes
})
// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
    // 开启进度条
    NProgress.start();
})
// 页面路由切换完毕的时候
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})
export default router

在项目中常见的会把路由守卫(权限等控制)与顶部进度条的使用抽取出来放到一个文件中

如: nprogress.js文件,放在src的根目录下

import router from './router'
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 
NProgress.configure({ showSpinner: false }) 
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (to.path !== '/login') {
    if (sessionStorage.getItem("token")) { // 判断当前的token是否存在 ; 登录存入的token
      next();
    } else {
      next({path: '/login'})
    }
  } else {
    next();
  }
});
router.afterEach(() => {
  NProgress.done()
})

然后在main.js中引入

import '@/nprogress' 

到此这篇关于Vue使用NProgress实现页面顶部的进度条显示效果的文章就介绍到这了,更多相关Vue NProgress内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文