부에루터 푸시 정의되지 않음

부에루터 푸시 정의되지 않음

나는 UI를 디자인하기 위해 Quasar 프레임워크를 사용했다.기능을 사용하여 로그아웃하고 다른 경로로 푸시하는 경우vue-router나는 다음과 같은 오류를 얻었다.

TypeError: Cannot read property 'push' of undefined

vuex 작업 방법을 사용하여 로그아웃 및 교체:

export const handleAuthStateChanged = ({ commit }, payload) => {
  firebaseAuth.onAuthStateChanged(function(user) {
    if (user) {
      // user is logged in
      let userId = firebaseAuth.currentUser.uid;
      firebaseDB.ref("users/" + userId).once("value", function(snapshot) {
        let userDetails = snapshot.val();
        commit("USER_DETAILS", {
          name: userDetails.name,
          email: userDetails.email,
          online: userDetails.online,
          type: userDetails.type,
          userId: userId
        });
      });
      this.$router.push('');
    } else {
      // user is logged out
      commit("USER_DETAILS", {});
      this.$router.replace('chat');
    }
  });
};

어떻게 하면 해결할 수 있을까?

다음과 같은 두 가지 문제가 있다:

• 그this@MisterCurtis의 답변에서 이미 다룬 컨텍스트 문제

  정상적인 기능에는 고유의 기능이 있다.thises6 화살표 기능이 이를 상속하는 동안 컨텍스트.몇몇은 그것에 대해 읽고 있다.

• this.$router하는 것이 타당할 뿐이다this구성 요소 인스턴스.Vue는 당신의 것을 삽입한다.router시제품의 예에 따라서.그러나 이 코드는 Vuex 동작이지 인스턴스 방법이 아니다.

사용 방법vue-routerVuex 또는 다른 모듈과 같은 외부 모듈에서 다음을 가져올 수 있다.

import router from '@/router'

그리고 나서 사용하라.

router.push

대신에this.$router.push

다른 대안은 로그인 구성 요소에서 인증 결과를 관리하고this.$router저기에

어떤 새로운 기능도 그 자체로 정의될 것이다.this가치. 콜백 안에this더 이상 원래의 Vue 인스턴스 "this"를 가리키지 않는다.

변경 시도:

firebaseAuth.onAuthStateChanged(function(user) { ...

화살표 함수에 연결:

firebaseAuth.onAuthStateChanged((user) => { ...

this그런 다음 다음, 다음이 있는 원래 Vue 인스턴스를 적절하게 참조한다.$router정의된다.

내 문제를 해결해줘서 모두 고마워.나는 vuex 동작에서 화살표 기능을 사용하지 않고 사용하여 수정했다.

export const handleAuthStateChanged = function ({ commit }, payload) {
...

참조URL: https://stackoverflow.com/questions/61126570/vue-router-push-undefined