每次调用 this.$router.push() 时重新加载导航栏组件

Question

我在 Vue.js 应用程序中开发登录/注册系统。我希望在拨打电话时更新导航栏中的项目this.$router.push('/')。

应用程序.vue：

<template>
  <div id="app">
    <Navbar></Navbar>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

导航栏组件：

export default {
    name: "Navbar",
    data: function() {
        return {
            isLoggedIn: false,
            currentUser: null
        }
    },
    methods: {
        getAuthInfo: function() {
            this.isLoggedIn = this.auth.isLoggedIn();
            if (this.isLoggedIn) {
                this.currentUser = this.auth.currentUser();
            }
        }
    },
    mounted: function() {
        this.getAuthInfo();
    },
    updated: function() {
        this.getAuthInfo();
    }
}

这是我重定向到另一个页面的方法：

const self = this;
this.axios
    .post('/login', formData)
    .then(function(data) {
        self.auth.saveToken(data.data.token);
        self.$router.push('/');
    })
    .catch(function(error) {
        console.log(error);
        self.errorMessage = 'Error!';
    });

摘要：问题是，当我调用 时，导航栏中的isLoggedIn和currentUser不会更新self.$router.push('/');。这意味着该函数mounted不会updated被调用。它们仅在我手动刷新页面后才会更新。

Answer 1

:key="$route.fullPath"我通过添加导航栏组件解决了问题：

<template>
  <div id="app">
    <Navbar :key="$route.fullPath"></Navbar>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>