vue router+vuex를 사용하여 홈페이지 로그인 확인 판단을 실현하는 방법

이번에는 vue router+vuex를 사용하여 홈페이지 로그인 확인 판단을 구현하는 방법과 vue router+vuex를 사용하여 홈페이지 로그인 확인 판단을 구현할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보자.

1.vue router

Routing판단 우리가 가장 먼저 생각하는 것은 라우터입니다.beforeEach front navigationguard, 이 방법은 from next 에 세 개의 매개변수를 받아들입니다.

to 매개변수는 점프하려는 라우팅 경로이고, from은 현재 내비게이션이 떠나려는 경로이며, next 메서드는 이 후크를 해결하는 데 사용됩니다.

다음은 직장에서 작성한 판단의 예입니다.

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2. this.$router 및 this.$route this.$router.push 및 this.$router.replace

로그인 시 페이지 로그인 요청 완료 후 다음 작업을 수행합니다

경로에 저장된 이전 경로의 매개변수를 가져온 후 해당 페이지로 점프합니다

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

위 코드에는 우리가 자주 혼동하는 두 가지 개념이 나타납니다.

We .$router는 라우터 인스턴스이며 라우팅에 직접 액세스하는 데 사용할 수 있습니다. 라우터 구성의 각 개체를 라우팅 레코드라고 부르며, this.$route는 각 라우팅 레코드에 액세스할 수 있도록 노출됩니다. 따라서 매개변수를 얻을 때는 this.$route를 사용하고, 경로로 점프할 때는 this.$router를 사용합니다.

상위 코드에서는 경로를 건너뛰기 위해 push 대신 대체를 사용했습니다. 둘의 차이점은 기록에 기록이 생성되는지 여부입니다. 교체는 새 레코드를 추가하지 않고 라우팅 레코드를 직접 대체합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

웹팩+반응 개발 환경 구축 방법

JS를 사용하여 로컬 카메라 호출 방법

위 내용은 vue router+vuex를 사용하여 홈페이지 로그인 확인 판단을 실현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!