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

(0)

相关推荐

  • Vue使用NProgress进度条的方法

    本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • vue使用nprogress实现进度条

    本文实例为大家分享了vue使用nprogress进度条展示的具体代码,供大家参考,具体内容如下 安装 npm i nprogress -S 使用 在main.js中 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_user

  • vue配置nprogress实现页面顶部进度条

    本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 npm install nprogress --save 2. 在main.js中导入 源码~~~~~~方便你复制 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an a

  • Vue中nprogress页面加载进度条的方法实现

    nprogress页面加载进度条 前言 很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来. 安装nprogress 直接在项目中执行安装命令:npm install --save nprogress nprogress方法 NProgress.start()

  • vue使用nprogress加载路由进度条的方法

    1.效果图 2.安装 npm install --save nprogress 基本用法 NProgress.start(); NProgress.done(); 3.在路由中使用 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start(); next(); }); router.afterEach(() =

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

    NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/rstacruz/nprogress 下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save nprogress 注意此处的--save等同于-s,就是将插件的名称及版本号保存到

  • vue页面加载时的进度条功能(实例代码)

    先看一张图 如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的. npropgress插件 github地址 简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档) 最简单的使用方式:vue项目的每次路由切换时,都加载进度条 安装 npm install --save nprogress 引入 在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中 // 引入 import NProgress from 'nprogress'; import

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

  • Vue element-ui表格内嵌进度条功能实现方法

    目录 一.引言 二.方法 三.实验结果与讨论 1.前期准备工作 2.实现功能 3完整实验代码 四.结语 一.引言 在着手做项目时,尤其是后台管理系统类的项目,不难会遇到,数据用进度条的形式呈现,可视化. 二.方法 本次实验主要应用element组件中的progress. 需要使用到属性: Type 进度条类型line/circle/dashboard :text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用) :percentage 百分比(必填) :color

  • vue项目实现文件下载进度条功能

    平时业务中下载文件方式常见的有俩种: 第一种,直接访问服务器的文件地址,自动下载文件: 第二种 ,服务器返回blob文件流,再对文件流进行处理和下载. 一般小文件适用于第一种下载方案,不占用过多服务器资源,而对于体积庞大的文件,常常使用文件流的方式进行传输,如图: 文件流传输成功后通过代码可以立即发起浏览器下载该文件流: 这种方式也有弊端,在文件流传输过程中,用户无法感知文件流的传输状态(进度),会造成一些困扰(无法确定当前下载操作是否已经生效).针对这种情况,我们可以在页面显示文件流的状态和传

  • 使用axios实现上传图片进度条功能

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 下面给大家介绍使用axios实现上传图片进度条功能,具体内容介绍如下所示: 在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还

  • vue歌曲进度条示例代码

    注意这个不是vue-cli创建的项目 是一个引用vue.js写的html文件 ,直接粘到一个html文件就能用了,我的音乐链接隔一段时间会失效,需要自己准备音乐 有拖动和点击切换播放进度的功能 demo图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible

  • 详解如何在Vue3+TS的项目中使用NProgress进度条

    目录 写在前面 在项目中安装 简单的封装 在Vue切换路由时展示进度条 写在前面 NProgress是一个轻量级的进度条组件,在Github上已经2.4万star数了,虽然这个组件已经好久没有更新了,最近一次更新是20年4月份,改了jQuery的版本,但是该组件的使用频率还是高的. 在项目中安装 这里的包管理工具使用的npm,如果你使用的是yarn或者pnpm,请自行更改安装命令,安装命令如下: npm i nprogress -S 因为我们是TS的项目,还需要安装其类型声明文件,命令如下: n

  • AngularJS实现进度条功能示例

    本文实例讲述了AngularJS实现进度条功能的方法.分享给大家供大家参考,具体如下: 一.功能描述: ① 通过select标签,可以为进度条选择不同的样式(颜色) ② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值) ③ 通过checkbox按钮,控制进度条上的文字是否显示 二.代码实现: <!DOCTYPE html> <html lang="en" ng-app='app'> <head> <meta charset=&

随机推荐