Вью роутер перезагружает текущий маршрут - PullRequest
Новая
       25

Вью роутер перезагружает текущий маршрут

2 голосов
/ 05 апреля 2019

Без перезагрузки всей страницы мне нужно повторно загрузить текущий маршрут (только перезагрузка компонента) в приложении vue.

У меня есть путь в маршрутизаторе vue, как показано ниже, 

{
  path: "/dashboard",
  name: "dashboard",
  component: loadView("Dashboard"),

},

Когда пользователь нажимает на элемент навигации Dashboard, пользователь будет перенаправлен на страницу Dashboard с программной навигацией vue router 

this.$router.push({ name: "dashboard" });

Но когда пользователь уже находится на маршруте и пользователь снова нажимает элемент навигации Dashboard, ничего не происходит.случается.Я думаю, что это стандартное поведение маршрутизатора vue.Но мне нужно принудительно перезагрузить компонент Dashboard (не обновлять всю страницу).

Я не могу использовать beforeRouteUpdate, так как маршрутизатор не обновляется.Также я попробовал глобальные, прежде чем охранники, как beforeEach.Но это тоже не работает.

Как принудительно перезагрузить компонент панели инструментов без перезагрузки всей страницы?

1 Ответ

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

Это можно сделать двумя способами.

1) Попробуйте выполнить vm. $ ForceUpdate (); как предложено здесь .

2) Вы можете использовать стратегию назначения ключей дочерним элементам, но всякий раз, когда вы хотите перерисовать компонент, вы просто обновляете ключ. 

<template>
  <component-to-re-render :key="componentKey" />
</template>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

Каждый раз, когда вызывается forceRerender, ключ prop componentKey будет меняться. Когда это произойдет, Vue будет знать, что он должен уничтожить компонент и создать новый.

То, что вы получаете, является дочерним компонентом, который повторно инициализирует себя и «сбрасывает» свое состояние.

...