vuejs2 - Vue路由器重载当前路由

Question

在不重新加载整个页面的情况下，我需要在 vue 应用程序中再次重新加载当前路由(仅重新加载组件)。

我在 vue 路由器中有一条路径，如下所示，

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

},

当用户点击 Dashboard 导航项时，用户将被重定向到带有 vue router 编程导航的 Dashboard 页面

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

但是当用户已经在仪表板 route 并且用户再次单击仪表板导航项时，没有任何 react 。我认为这是 vue 路由器的默认行为。但我需要强制重新加载仪表板组件(不是刷新整个页面)。

由于路由器未更新，我无法使用 beforeRouteUpdate。我也尝试过像 beforeEach 这样的全局前守卫。但它也不起作用。

如何在不重新加载整个页面的情况下强制重新加载仪表板组件？

Answer 1

它可以通过两种方式完成。

1) 尝试做 vm.$forceUpdate();按照建议 here .

2)您可以采取为子项分配键的策略，但是每当您想重新渲染组件时，只需更新键即可。

<template>
  <component-to-re-render :key="componentKey" />
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}
</script>

每次调用 forceRerender 时，prop componentKey 都会改变。当这种情况发生时，Vue 会知道它必须销毁组件并创建一个新组件。

你得到的是一个子组件，它将重新初始化自己并“重置”它的状态。