如何在 Vue 中重新渲染组件答案

【问题标题】：How to rerender a component in Vue如何在 Vue 中重新渲染组件
【发布时间】：2017-09-14 04:16:20
【问题描述】：

我有一个由三个选项卡组成的侧边栏：

Home Users List

当我点击“用户”选项卡时，路由器将像这样转换：

this.$router.push('index/users')

然后用户组件将被渲染在：

<router-view></router-view>

现在我想再次单击“用户”选项卡以获取最新数据。但组件不会再次重新渲染，数据也不会刷新。

有没有其他方法可以代替 F5 来解决它？我希望它适用于所有组件。 PS：我在生命周期钩子 created() 中获取数据。

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，我通过观察路由器来解决“重新加载”组件的变化：https://router.vuejs.org/en/essentials/dynamic-matching.html

  watch: {
      '$route': 'fetchData'  // call the function which update data
  },

【讨论】：

【解决方案2】：

据我所知，vuejs 路由器不支持在连接同一路由时刷新组件。但我给出了一个使用location.reload() 的简单方法，如下所示

this.$router.push('index/users')
location.reload()

【讨论】：