Перезагрузите компонент navbar при каждом вызове this. $ Router.push () - PullRequest
Новая
       10

Перезагрузите компонент navbar при каждом вызове this. $ Router.push ()

0 голосов
/ 31 марта 2019

Я разрабатываю систему входа / регистрации в моем приложении Vue.js.Я хочу, чтобы элементы в панели навигации обновлялись при вызове this.$router.push('/').

App.vue: 

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

Компонент Navbar: 

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 в Navbar не обновляются, когда я звоню self.$router.push('/');.Это означает, что функции mounted и updated не вызываются.Они обновляются только после того, как я вручную обновляю страницу.

Ответы [ 2 ]

1 голос
/ 01 апреля 2019

Проверьте это из документов : 

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, если хотите выполнить некоторую обработку при изменении маршрута.

0 голосов
/ 01 апреля 2019

Я решил проблему с добавлением :key="$route.fullPath" к компоненту Navbar: 

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