Question

在不重新加载整个页面的情况下，我需要在vue应用中重新加载当前路线（仅重新加载组件）。

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

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

},

当用户单击“仪表板”导航项时，将使用vue路由器编程导航将用户重定向到“仪表板”页面

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

但是，当用户已经在仪表板路线中并且用户再次单击“仪表板导航”项时，什么也没有发生。我认为这是vue路由器的默认行为。但是我需要强制重新加载仪表板组件（而不是刷新整个页面）。

由于路由器未更新，因此我不能使用beforeRouteUpdate。我也尝试过像beforeEach这样的全球前卫。但这也不起作用。

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

Answer 1

可以通过两种方式完成。

1）尝试执行vm。$ forceUpdate（）;如建议的here。

2）您可以采取为子代分配密钥的策略，但是只要您想重新渲染组件，就只需更新密钥即可。

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

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

获得的是一个子组件，该子组件将重新初始化自身并“重置”其状态。

Vue路由器重新加载当前路线

1 个答案: