반응형
Vue JS(router.BeforeEach) 예외를 문자열로 변환하지 못함
사용하려고 한다.router.beforeEach
와 함께localStorage
. 데이터가 있는 경우localStorage
나는 홈페이지를 건너뛰고 싶다.데이터가 없으면 홈페이지를 입력한다.다음과 같이 데이터를 인쇄할 수 있다.console.log
, 그러나 라우터 프로세스가 실패함
경로 탐색 중 [vue-properties] 검색되지 않은 오류 > 예외를 문자열로 변환하지 못함
내비게이션을 제어하려면 어떻게 해야 하는가?
나의router.js
:
Vue.use(Router);
const router = new Router({
routes: [{
path: '/',
name: 'index',
components: {
default: Index,
header: MainNavbar
},
props: {
header: {
colorOnScroll: 400
}
}
},
{
path: '/landing',
name: 'landing',
components: {
default: Landing,
header: MainNavbar,
footer: MainFooter
},
props: {
header: {
colorOnScroll: 400
},
footer: {
backgroundColor: 'black'
}
}
},
{
path: '/login',
name: 'login',
components: {
default: Login,
header: MainNavbar
},
props: {
header: {
colorOnScroll: 400
}
}
},
{
path: '/profile',
name: 'profile',
components: {
default: Profile,
header: MainNavbar,
footer: MainFooter
},
props: {
header: {
colorOnScroll: 400
},
footer: {
backgroundColor: 'black'
}
}
}
],
scrollBehavior: to => {
if (to.hash) {
return {
selector: to.hash
};
} else {
return {
x: 0,
y: 0
};
}
}
});
router.beforeEach((to, from, next) => {
let adres = JSON.parse(localStorage.getItem('adres'));
if (!adres) {
next('/');
} else {
next('/login');
}
});
export default router;
로컬 데이터 예:
{
"id":1,
"adi":"Demo",
"soyadi":"Sef",
"telefon":"05322375277",
"adres":"Girne Mahallesi 6022 Sk. No:22 Kahta/Adıyaman",
"fotograf":"http://localhost:8000/media/kullanici/sef/demosef/chef-1.jpg"
}
당신은 무한한 루프를 만들고 있다.beforeEach
경비원이 계속 계발되거든에서beforeEach
localStorage에 주소가 있는지 확인하고 다음 중 하나로 리디렉션함/
또는/login
다시 한번 새로운 경로로 들어가기 전에beforeEach
호출되어 주소가 있는지 확인하고 리디렉션하십시오.그 과정은 반복된다.전화해야 한다.next()
당신의 어딘가에 아무런 매개 변수 없이.beforeEach
정상 항법 확인을 위해 보호한다.그래서 당신은 이런걸 하고 싶을지도 모른다.
router.beforeEach((to, from, next) => {
if (to.path == '/') { // If we are entering the homepage.
let adres = JSON.parse(localStorage.getItem('adres'));
if (!adres) {
next();
} else {
next('/login');
}
} else { // Not entering the homepage. Proceed as normal.
next()
}
});
반응형
'IT이야기' 카테고리의 다른 글
넷링크 소켓을 커널 모듈과 통신하는 방법? (0) | 2022.05.07 |
---|---|
루프 조건에서 사용할 경우 strlen이 여러 번 계산되는가? (0) | 2022.05.07 |
TypeScript를 사용하여 vuex에서 커밋에 대한 유형 체킹을 추가하는 방법 (0) | 2022.05.06 |
Vue 2 뷰포트에 표시되는 요소 확인 (0) | 2022.05.06 |
다른 항목이 선행되지 않는 경우 일치하는 항목을 찾기 위한 정규식 (0) | 2022.05.06 |