Vue：在路由上第二次不渲染组件

Question

我正面临着我不理解的 Vue 行为。我正在使用组件之间的路由。

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

所以在加载应用程序时，路由登录组件，登录成功，然后使用上述方法注销组件。在此之后，当我尝试再次路由登录时，登录组件未呈现，但路由显示在地址行中

你可以在下面看到我的路线

    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 未定义” VueJS 14 $销毁 破坏 _ 吨 X $ 姬 _更新 r 得到 跑步 Yn 他 ue 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'
            }
        }
    }

导航栏右侧带有注销按钮

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

        },

    }
}

Answer 1

所以这个问题真的很愚蠢。

在用户组件中数据丢失返回。

添加后

data(){
        return {}
    },

一切都开始了