Vue.js 에서 nprogress 진행 바 사용 하기
npm install --save nprogress
간단히 사용 하 다
router 디 렉 터 리 아래 index.js
끌어들이다
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
배치 하 다.
NProgress.configure({
easing: 'ease',
speed: 500, //
showSpinner: false, // ico
trickleSpeed: 200, //
minimum: 0.3 //
});
경로 수비
router.beforeEach((to, from, next) => {
NProgress.start();
if (to.path === '/login' || to.path === '/home') {
next();
} else {
let token = localStorage.getItem('Authorization');
if(to.matched.some(record => record.meta.requiresAuth)) {
if(!token){
next('/login');
}else {
next();
}
}
// if ((!token || isAuth) && to.matched.some(record => record.meta.requiresAuth)) {
// next('/login');
// } else {
// next();
// }
}
if (to.matched.length === 0) {
//
from.name ? next({
name:from.name }) : next('/404'); // ，
} else {
next(); //
}
});
// -
router.afterEach(() => {
NProgress.done();
});
진행 막대 스타일 수정
프로젝트 App.vue
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
