vue Nprogress 진도 항목 기능 흔 한 문제 실현

NProgress 는 페이지 이동 입 니 다.브 라 우 저 상단 에 나타 나 는 진행 막대 입 니 다.
홈 페이지:http://ricostacruz.com/nprogress/
github： https://github.com/rstacruz/nprogress
아래 그림 의 이러한 상단 진도 바 는 매우 흔히 볼 수 있 는 것 으로vue프로젝트 에 대응 하 는 플러그 인 이 있 습 니 다.Nprogress Nprogress진도 조 의 사용 방법 은 다음 과 같다.
1.플러그 인 설치nprogressnpm 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 진도 항목 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!