Vue.js Vue:在布线时第二次不渲染组件

我面对的是我不理解的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，它是否会以某种方式影响这种行为

UPD：

当我注销时，我在控制台中看到以下错误

TypeError:“t._数据未定义” VueJS 14 $destroy 破坏 _ T x $ 冀 _更新 R 得到 跑 伊恩 他 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-多个组件的通用navbar

    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('/');
            });

        },

    }
}

---

所以这个问题真的很愚蠢

用户组件中的数据未返回

添加后

data(){
        return {}
    },

---

一切都开始工作了

您发布的代码是有效的，应该可以工作。我怀疑的是，当Vue尝试运行组件时，该组件会抛出一个错误，因此它不会渲染。你的控制台中有错误吗？@MarcRo，我只看到chunk.js中的一个错误，这对meChunk.js来说毫无意义。它很可能是你的组件，无法呈现。你能发布错误吗？@MarcRo检查更新请同时发布组件。在生命周期中应该有一些无效的代码，hookVue递归地将返回的对象转换为getter/setter，使其成为“被动的”。如果不需要

数据

，请将其全部删除。空

数据

的简写是

数据：（）=>（{}）

。要点是：它必须是一个返回对象的函数。稍后我会用到它，用户组件还远没有准备好