vue 는 nprogress 를 사용 하여 루트 진도 바 를 불 러 오 는 방법

1599 단어 vuenprogress진도 표
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(() => {
 NProgress.done();
});
PS:Vue 가 NProgress 를 사용 하 는 방법 을 살 펴 보 겠 습 니 다.
NProgress 는 페이지 이동 입 니 다.브 라 우 저 상단 에 나타 나 는 진행 막대 입 니 다.
홈 페이지
github： http://ricostacruz.com/nprogress/
아래 그림 에서 보 듯 이 녹색 진도 조 는 바로NProgress실현 하 는 효과 이다.
这里写图片描述
1.설치

$ npm install --save nprogress   
$ yarn add nprogress

//  
NProgress.start();
NProgress.done();
2.사용

//  
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})

router.afterEach(() => {
 NProgress.done()
})
총결산
vue 가 nprogress 를 사용 하여 로 케 이 션 을 불 러 오 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue nprogress 로 케 이 션 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
웹 팩 은 압축 되 지 않 은 파일 과 압축 되 지 않 은 파일 을 동시에 출력 하 는 방법
JS+canvas 오목 인간 과 컴퓨터 의 대전 실현 절차 에 대한 상세 한 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage