在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
NProgress是页面跳转是出现在浏览器顶部的进度条 下图中的这种顶部进度条是非常常见的,在
1.安装
2. 此处进度条主要用于页面路由的跳转过程中,因此可以直接在 在路由跳转之前,开启进度条加载,在路由跳转之后,结束进度条的加载。
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; 上面的重点如下: 引入插件及对应的
3. 4.
3. 在 #nprogress .bar { background: #f90 !important; //自定义颜色 } 到此这篇关于vue Nprogress进度条功能实现的文章就介绍到这了,更多相关vue Nprogress进度条内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论