vue|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
![vue|vue Nprogress进度条功能实现常见问题](https://img.it610.com/image/info11/100bdbd5423a4aa1af38e294dd6f57b8.jpg)
文章图片
nprogress
配置参数![vue|vue Nprogress进度条功能实现常见问题](https://img.it610.com/image/info11/26c2da2bd7c64d859fe45e9aaf7568cd.jpg)
文章图片
3.
router.beforeEach
路由跳转之前拦截时,加载进度条【vue|vue Nprogress进度条功能实现常见问题】
![vue|vue Nprogress进度条功能实现常见问题](https://img.it610.com/image/info11/cf975ab5d96247d192c4c7145f2b79ea.jpg)
文章图片
4.
router.afterEach
路由跳转结束后,关闭进度条![vue|vue Nprogress进度条功能实现常见问题](https://img.it610.com/image/info11/0c0b68980041432e9eaa7fdf3bfd02f2.jpg)
文章图片
3.
nprogress
插件修改样式在
App.vue
文件中的style
样式中,添加如下代码,更改进度条的颜色#nprogress .bar {background: #f90 !important; //自定义颜色}
到此这篇关于vue Nprogress进度条功能实现的文章就介绍到这了,更多相关vue Nprogress进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目