Vue使用NProgress实现页面顶部的进度条显示效果
落雪小轩韩 人气:0一、安装
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'
加载全部内容