Vue: 라우팅에서 컴포넌트를 두 번째로 렌더링하지 않음

Vue: 라우팅에서 컴포넌트를 두 번째로 렌더링하지 않음

나는 이해할 수 없는 Vue의 행동을 마주하고 있다.컴포넌트간의 루팅을 사용하고 있습니다.

   methods: {
        redirectToLogin() {
            this.$router.push("/login");
        },
        redirectToRegister() {
            this.$router.push("/register");
        }
    }

따라서 앱을 로드할 때 Login 컴포넌트를 라우팅하고 정상적으로 로그인한 후 위의 방법으로 컴포넌트에 로그아웃합니다.그 후 다시 로그인하기 위해 라우팅을 시도하면 Login 컴포넌트는 렌더링되지 않지만 주소 행에 루트가 표시됩니다.

아래에 나의 루트를 볼 수 있다.

    routes: [
    {path: '/', name: 'Hello', component: Hello},
    {path: "/login",name:'Login', component: Login},
    {path: "/register",name:'Register', component: Register},
    {path: "/user/:id",name:'User', component: User},
    {path: "/reset",name:'PasswordReset', component: PasswordReset},
  ]

나는 또한 Vuex를 사용하고 있는데 그것이 그러한 행동에 영향을 미칠 수 있을까?

업데이트:

로그아웃 시 콘솔에 다음 오류가 표시됩니다.

TypeError: "t._data is defined" VueJs 14 $destroy destroy _ T x $ji _ update get run Ynhe vue.runtime.esm.js : 1888 : 12

UPD 2 : 컴포넌트

이것은 앱에 로드된 첫 번째 컴포넌트입니다.여기서 루트 리드를 로그아웃한 후 라우터 링크가 작동하지 않음

    export default {
        name: 'Hello',
        data() {
            return {
                msg: 'Work With your projects in agile manner'
            }
        }
    }

로그인 컴포넌트

export default {
    name: "Login",
    data() {
        return {
            errorOccurred: false,
            errorMessage: '',
            credentials: {
                login: '',
                password: ''
            },
            remember: false
        }
    },
    methods: {
        submit() {
            this.$store.dispatch('loginUser', this.credentials).then(() => {
                this.errorMessage = this.getError;
                if (this.errorMessage.length) {
                    this.errorOccurred = true;

                } else {
                    this.$router.push({path: '/user/' + this.getId});
                }
            });

            this.errorOccurred = false;
        },
        resetPassword() {
            this.$router.push("/reset");
        },
    },
    computed: {
        loginValidation() {
            return this.credentials.login.length > 0
        },
        passwordValidation() {
            return this.credentials.password.length > 0
        },
        getError() {
            return this.$store.getters.getErrorMsg;
        },
        getId() {
            return this.$store.getters.getUserId;
        }
    },
}

사용자 컴포넌트가 로그인을 통해 라우팅되었습니다.

    import NavbarCommon from "./NavbarCommon";
    export default {
        name: "User",
        components: {NavbarCommon},
        data(){
        },
        methods: {
            loadAvatar(){
               let image = '../../assets/emptyAvatar.png';
                if ('avatar' in  this.getUser){
                    image = this.getUser.avatar;
                }

                return image;
            }
        },
        computed:{
            getUser() {
                    return this.$store.getters.getUser;
            }
        }
    }

그리고 두 개의 구성 요소가 더 있습니다.NavbarComponent - 여러 구성 요소에 대한 공통 내비게이션

    import NavbarRight from "./NavbarRight";
    export default {
        name: "NavbarCommon",
        components: {NavbarRight},
        methods:{
            routeToUser(){
                this.$router.push({path: '/user/' + this.getUser});
            },
            routeToProject(){
                this.$router.push({path: '/project/' + this.getProject});
            }
        },
        computed:{
            getUser() {
                return this.$store.getters.getUserId;
            },
            getProject(){
                //TODO:
                return 'get project id'
            }
        }
    }

로그아웃 버튼이 있는 Navbar 오른쪽 부분

export default {
    name: "NavbarRight",
    methods:{
        logOut(){
            this.$store.dispatch('logOutUser').then(()=>{
                this.$router.push('/');
            });

        },

    }
}

그래서 그 문제는 정말 바보같다.

사용자 구성 요소 데이터가 반환되지 않았습니다.

추가 후

data(){
        return {}
    },

모든 것이 작동하기 시작했다.

언급URL : https://stackoverflow.com/questions/57979721/vue-not-rendering-the-component-for-the-second-time-on-routing