首页 > 其他分享 >在vue项目中使用nprogess插件

在vue项目中使用nprogess插件

时间:2023-02-07 19:56:35浏览次数:39  
标签:插件 vue 进度条 nprogess ease router NProgress

nprogress 插件是在页面刷新和跳转时出现在浏览器顶部的进度条,它会随着页面的加载而显示进度状态。可在官网 查看相关效果。

在vue项目中使用 nprogress 插件
1.安装:npm install --save nprogress

2.在要使用的文件中引入

3.写在路由守卫router.beforeEach和router.afterEach中

router.beforeEach((to, from, next) => {
  NProgress.start() // 进度条开始
  next()
})

router.afterEach(() => {
  NProgress.done() // 进度条结束
})

// 进度条的配置项:ease可以设置css3动画,如ease,linear;speed是进度条从开始到结束的耗时
NProgress.configure({ease:'linear',speed: 500});

标签:插件,vue,进度条,nprogess,ease,router,NProgress
From: https://www.cnblogs.com/ccx-lly/p/17099614.html

相关文章

  • 《Vue.js 设计与实现》读书笔记 - 第13章、异步组件与函数式组件
    第13章、异步组件与函数式组件13.1异步组件要解决的问题用户可以简单通过import异步导入组件。<template><component:is="asyncComp"></template><script>ex......
  • Vite+Vue3+TS 自定义全局组件,无法不能高亮解析的解决办法
    检查package.json中的devDependencies是否安装@vue/runtime-core依赖,没有的话,安装后重启VSCode一、安装依赖$yarnadd@vue/runtime-core-D$yarnaddunplugin-vue-......
  • spi~在插件开发过程中的使用
    spi是原生java的组件,通过META-INF/services目录进行注册,通过ServiceLoader进行加载,一般可以用在组件开发中,你在公用组件中封装好逻辑,将个性化的部分抽象出一个接口,接口通过......
  • vue3+ts基础使用
    详见:vue官方文档响应式数据<scriptsetuplang="ts">import{ref,reactive,computed}from"vue";importtype{Ref}from"vue";//ref//可通过Ref或......
  • vue3新增特性合集
    封装公共方法到原型上再vue2中全局挂载方法使用的是Vue.prototype.xxx的形式来挂载的,但是在vue3中这个方法将不能使用,取而代之的是app.config.globalProperties......
  • Vue
    vue前端appAndroid:javaios:object-cswiftpc浏览器:htmlcss应用程序移动端浏览器:htmlcss微信:小程序,小程序开发平台公众号:htmlcssjs混合式移动......
  • vue table表格form表单校验输入内容,elment ui table内容校验 form表单input验证
    //html部分<el-form:model="formObj":rules="rules"><el-table:data="formObj.list"><el-table-columnalign="center"><templateslot="header"><span>nam......
  • vue过滤出字符串中的汉字,match加正则
    vue过滤出字符串中的汉字,match加正则 str="23申迪MTN001(102380026)";str.match(/[\u4e00-\u9fa5]/g).join("").match返回的是数组/[\u4e00-\u9fa5]/g筛选字符串......
  • Vue中v-model指令的修饰符
    v-model指令的修饰符有三个,分别是:1.number作用:自动将用户的输入值转为数值类型。示例:<inputtype="text"v-model.number="age">2.trim作用:自动忽略输入内容的首尾空......
  • 沉浸式翻译插件:沉浸式网页双语翻译
    使用沉浸式翻译的起因前一段时间谷歌翻译宣布跑路,不再对大陆用户提供服务。听闻这一噩耗我不由得心里一惊,燕子!啊不是,谷歌没有你我可咋活呀!对于没太大工作需求,顶多遇上几个......