Vue에서 Nprogress.js 진행 표시줄을 사용하는 방법

NProgress.js는 사용하기 쉽고 단일 페이지 애플리케이션에 쉽게 통합될 수 있는 경량 진행률 표시줄 구성 요소입니다. 이 글은 주로 vue 프로젝트에서 Nprogress.js 진행 표시줄을 사용하는 방법을 소개합니다. 필요하신 분들은 참고하시면 됩니다.

NProgress.js는 페이지를 열고 로드할 때 진행 표시줄이 나타나는 효과를 제공합니다. 페이지 상단에 애니메이션 로딩이 나타납니다. NProgress.js는 사용하기 쉽고 단일 페이지 애플리케이션에 쉽게 통합될 수 있는 경량 진행률 표시줄 구성 요소입니다.

Ajaxyy 앱의 슬림 진행률 표시줄. Google, YouTube, Medium에서 영감을 얻었습니다.

vue에서 nprogress.js 사용

Installation

$ bower install --save nprogress
$ npm install --save nprogress

프로젝트에 소개

main.js에서 사용할 nprogress 소개

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

기본 사용법

NProgress.start(); 
NProgress.done();

라우팅 페이지 스위치에서 to use

main.js에서도

router.beforeEach((to, from, next) => {
if (to.path == '/login') {
 sessionStorage.removeItem('username');
 }
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') {
 next({path: '/login'})
 } else {
 NProgress.start();
 next()
 }
});
router.afterEach(transition => {
 NProgress.done();
});

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue.js의 페이징에서 페이지 내용을 변경하려면 페이지 번호를 클릭하세요.

vue2.0 구성 요소에서 값 전달 및 통신을 구현하는 방법

webpack 4.0.0-beta. 0 버전의 새로운 기능(자세한 튜토리얼)

위 내용은 Vue에서 Nprogress.js 진행 표시줄을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!