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

Question

我在我的 Vue.js 应用程序中开发了一个 login/registration 系统。我希望在调用 this.$router.push('/').

时更新导航栏中的项目

App.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!';
    });

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

Answer 1

看看这个 from the docs:

beforeRouteUpdate (to, from, next) {
  // called when the route that renders this component has changed,
  // but this component is reused in the new route.
  // For example, for a route with dynamic params `/foo/:id`, when we
  // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
  // will be reused, and this hook will be called when that happens.
  // has access to `this` component instance.
},

我希望您的 Navbar 组件可以跨路线重复使用，因此它的 mounted 和 updated 不会被调用。如果您想对路由更改进行一些处理，请尝试使用 beforeRouteUpdate。

Answer 2

我通过将 :key="$route.fullPath" 添加到 Navbar 组件解决了这个问题：

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

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

Reload navbar component on every this.$router.push() call

vue.js

vue-router

vue-component

vuejs2