文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue Nprogress进度条功能实现常见问题

2024-04-02 19:55

关注

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进度条内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯