Vue: Not rendering the component for the second time on routing

Question

I am facing behavior of Vue which I don't understand. I am using routing between components.

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

So when load the app, route Login component, login successfully and then log out to component with methods above. After this when I am trying to route to login again the Login component is not rendered, but the route is shown in the address line

Below you can see my routes

    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},
  ]

I am also using Vuex can it somehow affect such behaviour?

UPD:

When I log out I see the following error in my console

TypeError: "t._data is undefined" VueJS 14 $destroy destroy _ T x $ ji _update r get run Yn he ue vue.runtime.esm.js:1888:12

UPD 2 : Components

This is first component loaded to the app. After logging out route leads here and none of the router links work

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

Login component

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;
        }
    },
}

User component routed from login.

    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;
            }
        }
    }

And two two more components. NavbarComponent - common navbar for several components

    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'
            }
        }
    }

And right part of Navbar with logout button

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

        },

    }
}

The code you posted is valid and should work. What I suspect is that your component throws an error when Vue tries to run it - hence it does not render. Do you get any errors in your console? — MarcRo
@MarcRo , I see only an error from chunk.js which makes no sense to me — Alex Bondar
Chunk.js is most likely your component that won't render. Can you post the error? — MarcRo
Please also post the component. You should have some invalid code in a lifecycle hook — MarcRo

Alex Bondar Alex Bondar · Accepted Answer · 2019-09-18T22:26:43

So the problem is really stupid.

In User component data missed return.

After adding

data(){
        return {}
    },

Everything started working

Vue: Not rendering the component for the second time on routing

1 Answers