为我工作

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

这似乎是matthiasg关于这个问题的一个非常干净的解决方案:

你也可以使用:key=" somvariableunderyourcontrol "，当你想要完全重建组件时改变键

对于我的用例，我将Vuex getter作为道具提供给组件。Vuex会以某种方式获取数据，但反应性不会可靠地重新呈现组件。在我的例子中，将组件键设置为道具上的某个属性可以保证在getter(和属性)最终解析时进行刷新。

Why?

.．.需要强制更新吗?

也许你没有在最好的状态下探索Vue:

要使Vue自动对值更改作出反应，必须在数据中初始声明对象。如果没有，则必须使用Vue.set()添加它们。

请参阅下面演示中的注释。或者在JSFiddle中打开相同的演示。

new Vue({ el: '#app', data: { person: { name: 'Edson' } }, methods: { changeName() { // because name is declared in data, whenever it // changes, Vue automatically updates this.person.name = 'Arantes'; }, changeNickname() { // because nickname is NOT declared in data, when it // changes, Vue will NOT automatically update this.person.nickname = 'Pele'; // although if anything else updates, this change will be seen }, changeNicknameProperly() { // when some property is NOT INITIALLY declared in data, the correct way // to add it is using Vue.set or this.$set Vue.set(this.person, 'address', '123th avenue.'); // subsequent changes can be done directly now and it will auto update this.person.address = '345th avenue.'; } } }) /* CSS just for the demo, it is not necessary at all! */ span:nth-of-type(1),button:nth-of-type(1) { color: blue; } span:nth-of-type(2),button:nth-of-type(2) { color: red; } span:nth-of-type(3),button:nth-of-type(3) { color: green; } span { font-family: monospace } <script src="https://unpkg.com/vue"></script> <div id="app"> <span>person.name: {{ person.name }}</span><br> <span>person.nickname: {{ person.nickname }}</span><br> <span>person.address: {{ person.address }}</span><br> <br> <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br> <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br> <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button> <br> <br> For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below). </div>

要掌握Vue的这一部分，请查看关于反应性-更改检测警告的官方文档。这是一本必读的书!

请读一读 http://michaelnthiessen.com/force-re-render/

可怕的方式:重新加载整个页面 更好的方法:使用Vue的内置 最好的方法:在你的 组件

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

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

在某些情况下，我也用watch。

对于那些还在四处寻找的人来说，现在有一个包。

https://github.com/gabrielmbmb/vuex-multi-tab-state

我所要做的就是安装它，并将它添加到我的插件中。ts(就像它在那个页面上显示的那样)，它确实做了我想要的。

2021年12月更新:

你可以通过添加:key="$route.fullPath"强制重载组件。

对于子组件:

<Child :key="$route.fullPath" />

对于router-view标签:

<router-view :key="$route.fullPath" />

然而,:关键= " $路线。fullPath只能强制重载不同路由的组件，不能强制重载同一路由的组件。为了能够强制重载同一路由的组件，我们需要在:key="$route "中添加一个数组"value"。fullPath，并修改value。所以它变成:key="[$route。"fullPath, value]，我们需要改变value。

*我们可以将Array赋值给:key=。

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    reload() {
      this.value++;
    }
  }
}
</script>

但是，要继续使用“$route. conf”fullPath"和"value"有时会导致一些错误，所以只有当一些事件如Click发生时，我们才使用"$route "。fullPath和value。除非发生一些像Click这样的事件，我们总是只需要使用"$route.fullPath"。

这是最终的代码:

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      state: true,
      value: 0,
    };
  },
  methods: {
    reload() {
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    }
  }
}
</script>

不幸的是，在Vue中没有正确强制重新加载组件的简单方法。这就是Vue目前的问题所在。