Question

我正在面对我不了解的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，它会以某种方式影响这种行为吗？

UPD：

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

TypeError：“ t._data未定义” VueJS 14 $ destroy 破坏 _ Ť X $ ji _更新 [R 得到跑 n 他 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 {}
    },

一切都开始正常工作

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

1 个答案: