Как повторно визуализировать уже смонтированный компонент после изменения маршрута в vue? - PullRequest
Новая
       172

Как повторно визуализировать уже смонтированный компонент после изменения маршрута в vue?

0 голосов
/ 23 декабря 2019

Компонент, который содержит q-btn-dropdown, уже визуализируется до изменения маршрута. Изменение маршрута происходит, когда пользователь входит в систему, поэтому helloGuest() вызывается только один раз, когда компонент, имеющий q-btn-dropdown. Итак, как мне перерисовать компонент, который содержит q-btn-dropdown, чтобы вызывался helloGuest() и q-btn-dropdown обновлялся? 

methods: {
login() {
  this.$axios.post('login', this.formData).then(async (res) => {
    console.log(res);
    await localStorage.setItem('user', JSON.stringify(res));
    await localStorage.setItem('token', res.token);
    this.$router.push('/');
  }).catch((error) => {
    this.error = {
      email: error.response.data.message,
    };
  });
},


   <q-btn-dropdown flat dense
    :label="helloGuest()"
    class="gt-xs"
    >
 helloGuest() {
  const userName = JSON.parse(localStorage.getItem('user')) || {};
  console.log('[isauth]', this.isAuthenticated);
  console.log('[userName]', userName);
  console.log('[router]', this.$router);
  if (this.isAuthenticated) {
    // this.$forceUpdate();
    return `Hello ${userName.username}`;
  }
  return 'Sign In';
},

мой файл маршрута выглядит следующим образом, и яне использовал навесной крюк на посадочной трассе 

const routes = [{
path: '/',
component: () => import('layouts/MainDashboard.vue'),
children: [
  { path: '', component: () => import('components/FrontComponent.vue'), meta: { requiresAuth: false } },
  { path: '/product_details/:productId', component: () => import('components/ProductDetails.vue'), meta: { requiresAuth: false } },
  { path: '/cart', component: () => import('../cart/ShoppingCart.vue'), meta: { requiresAuth: false } },
  { path: '/checkout', component: () => import('../cart/CheckoutComponent.vue'), meta: { requiresAuth: false } },
  {
    path: '/login', name: 'Login', component: () => import('components/LoginComponent.vue'), meta: { requiresAuth: false },
  },
  { path: '/register', component: () => import('components/RegisterComponent.vue'), meta: { requiresAuth: false } },
],

Ответы [ 2 ]

1 голос
/ 23 декабря 2019

Vue может повторно использовать экземпляр, когда компонент такой же, поэтому this.$route в компоненте изменится, но хуки created(), beforeMounted() и mounted() не будут вызываться.

Чтобы заставить vue создать новый экземпляр компонента, вы можете установить уникальный ключ, например <router-view :key="$route.fullPath">

Другой вариант - реагировать на изменения в $route с помощью наблюдателя: 

watch: {
  "$route.params.cname": {
    handler(cname) {
      // do stuff
    },
    immediate: true
  }
}
0 голосов
/ 24 декабря 2019

Лучшим решением, по-видимому, является использование наблюдателя для отслеживания $ route и вызова функции при изменении $ route

...