vue Nprogress进度条功能实现常见问题
NProgress是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
下图中的这种顶部进度条是非常常见的,在vue
项目中有对应的插件。Nprogress
Nprogress
进度条的使用方法如下:
1.安装nprogress
插件
npm install --save nprogress
注意此处的--save
等同于-s
,就是将插件的名称及版本号保存到package.json
文件中的dependencies
中,这样其他人克隆项目后,可以通过npm install
就可以下载下来所有的插件到node_modules
中了。
2.nprogress
插件的使用
此处进度条主要用于页面路由的跳转过程中,因此可以直接在router/index.js
中使用:
在路由跳转之前,开启进度条加载,在路由跳转之后,结束进度条的加载。
router/index.js
文件内容如下:
import Vue from "vue"; import VueRouter from "vue-router"; import store from "@/store"; import HomeLayout form "@/views/home/layout"; import NProgress from "nprogress"; import userCenter from "./modules/userCenter"; import 'nprogress/nprogress.css' Vue.use(VueRouter); NProgress.inc(0.2); NProgress.configure({easing:'ease',speed:2000,showSpinner:false,trickle:false}) const routes = [{ path:"/", name:"Index", redirect:"/index" },{ path:"/index", name:'Index', component:()=>import ('@/views/home/index.vue'), meta:{title:'首页'} },{ path:'/home', name:'Home', component:()=>import('@/views/home/main'), meta:{title:'首页'} },{ path:'/login', name:'Login', component:()=>import ('@/views/login'), meta:{title:'登录'} },{ path:'/register', name:'register', component:()=>import('@/views/register'), meta:{title:'注册'} },{ path:'/404', name:'404', component:()=>import('@/views/errorPage') },{ path:'*', redirect:'/404' }] const router = new VueRouter({ mode:'history', routes }) //路由跳转之前做拦截 router.beforeEach((to,from,next)=>{ //页面跳转之前,开启进度条 NProgress.start(); //某些拦截操作,是否登录权限等... const token = window.localStorage.getItem('token');//从localstorage中获取缓存 if(to.meta.title){ document.title = to.meta.title;//将浏览器选项卡的标题改为页面的title } store.commit('changeCurrentPage',to.path); const reg = /[a-zA-Z]+\/$/; //不需要校验的路由直接跳转 if(!to.meta.requireAuth){ if(reg.test(to.path)){ next(to.path.replace(reg,'')); return; } next(); return } if(token&&to.name!=='Index'){ //已登录且要跳转的页面不是登录页面 if(reg.test(to.path)){ next(to.path.replace(reg,'')); return; } next();//可以直接跳转 }else if(token && to.name == 'Index'){ //已登录且要跳转的页面是登录页 if(reg.test(to.path)){ next(to.path.replace(reg,'')); return } next('/home');//直接跳转到首页 }else if(!token && to.name !='Index'){ //未登录且要跳转的页面不是登录页 next('/index');//跳转到登录页 }else{ if(reg.test(to.path)){ next(to.path.replace(reg,'')); return; } next() } }) router.afterEach(to=>{ NProgress.done(); window.scrollTo(0,0); }) //处理重复点击当前页菜单,出现警告问题 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location){ return originalPush.call(this,location).catch(err=>err); } export default router;
上面的重点如下:
引入插件及对应的css
nprogress
配置参数
3.router.beforeEach
路由跳转之前拦截时,加载进度条
4.router.afterEach
路由跳转结束后,关闭进度条
3.nprogress
插件修改样式
在App.vue
文件中的style
样式中,添加如下代码,更改进度条的颜色
#nprogress .bar { background: #f90 !important; //自定义颜色 }
到此这篇关于vue Nprogress进度条功能实现的文章就介绍到这了,更多相关vue Nprogress进度条内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24