首页 > 其他分享 >vue实现Nprogress进度条功能

vue实现Nprogress进度条功能

时间:2025-01-15 13:58:05浏览次数:3  
标签:vue console log 进度条 ease NProgress import Nprogress nprogress

实现效果:

1、安装

NProgress可以通过npm安装

npm install --save nprogress

2、在index.ts中配置

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'

NProgress.configure({
  ease: "ease",
  speed: 500,
})
//路由前置守卫
router.beforeEach((to, from, next) => {
  // console.log(to)
  NProgress.start()
 

})
//路由后置守卫
router.afterEach((to, from) => {
  // console.log(to)
  NProgress.done()
})

标签:vue,console,log,进度条,ease,NProgress,import,Nprogress,nprogress
From: https://blog.csdn.net/or77iu_N/article/details/143735934

相关文章

  • vue3+ts展示条项字段
     展示条项组件:<el-formv-if="currentStep===4"label-position="left"label-width="120px"style="display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:138px;"><el-rowv-for="(row,r......
  • 项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(六)
    文章目录一、考试管理模块实现1、添加考试功能实现1.1页面设计1.2前端功能实现1.3后端功能实现1.4效果展示2、考试管理功能实现2.1页面设计2.2前端功能实现2.3后端功能实现2.3.1后端查询接口实现2.3.2后端编辑接口实现2.3.3后端删除接......
  • vue2生命周期,vue2各个方法介绍
    beforeCreate:在这里加loading(页面加载的时候我想要做的事情)created:在这里结束loading,还可以做一些初始数据的获取beforeMount:载入前(已经完成了data和el数据初始化),但是页面中的内容还是vue的占位符,data中的数据是没有被挂载到dom节点中的;可以在......
  • 在vue前端项目中使用高德地图
    高德地图api对接1.申请高德地图开发者GeoHUB登录地址高德开放平台|高德地图API未注册的同学需要支付宝扫码绑定申请个人开发者登录之后2.申请应用选中控制台->申请应用配置key3.项目开发项目开发参考文档:地图点击和鼠标事件-地图事件-示例中心-JSAPI2.0示例|......
  • vue.js actions和getters
    在Vue.js中,使用vuex状态管理库来管理全局状态。其中,actions和getters是vuex中的两个重要概念。actions用于处理异步操作,例如发送HTTP请求或者其他需要等待结果的操作。它可以包含任意异步操作,并且可以通过commit方法来触发mutations的方法来改变state,也可以通过dispatch方法来......
  • vue.js辅助函数-mapMutations
    在Vue.js中,使用辅助函数可以更方便地使用Vuex的mutation。而mapMutations就是Vuex提供的一个辅助函数,它可以将mutation映射到组件的methods中,使得我们可以在组件中直接调用mutation,而不需要手动进行commit。mapMutations函数接收一个字符串数组或对象作为参数,数组中的字符串即......
  • vuex 构建多组件共享的数据环境
    Vuex是Vue.js的官方状态管理库,用于在Vue.js应用程序中构建多个组件共享的数据环境。Vuex可以帮助我们解决组件之间共享数据和状态管理的问题。它将应用程序的状态存储在一个单一的地方,称为"store",并且允许组件直接从store中获取和修改状态,而不需要通过事件或属性传递......
  • VUE2-表格根据方向键聚焦编辑框
    需求项目需要表格内的编辑框可以根据上下左右方向键去自动聚焦实现思路查阅网上的资料,是给表格内的每一个编辑框增加一个标识,要么类,要么是类似递增的一个id,然后监听键盘事件,但是我觉得这样不好,需要手动给每个编辑框加标识,太麻烦了。我的思路是写一个指令"keyboard-navigati......
  • Python+Django的框架药品购买系统(Pycharm Flask Django Vue mysql)
    收藏关注不迷路,防止下次找不到!文章末尾有惊喜项目介绍Python+Django的框架药品购买系统(PycharmFlaskDjangoVuemysql)项目展示详细视频演示请联系我获取更详细的演示视频,相识就是缘分,欢迎合作!!!所用技术栈前端vue.js框架支持:django数据库:mysql......
  • Python+Django的智能宾馆预定系统(Pycharm Flask Django Vue mysql)
    收藏关注不迷路,防止下次找不到!文章末尾有惊喜项目介绍Python+Django的智能宾馆预定系统(PycharmFlaskDjangoVuemysql)项目展示详细视频演示请联系我获取更详细的演示视频,相识就是缘分,欢迎合作!!!所用技术栈前端vue.js框架支持:django数据库:mysql5.7数......