添加以下代码:

this.$forceUpdate()

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的这一部分，请查看关于反应性-更改检测警告的官方文档。这是一本必读的书!

添加:key到vue-router库的router-view组件的方法会引起我的fickers，所以我使用vue-router的“组件内保护”来拦截更新，并在同一路由上的路径更新时相应地刷新整个页面(如$router. exe)。美元,路由器。推,路由器。替换也无济于事)。唯一需要注意的是，通过刷新页面，我们暂时打破了单页应用行为。

  beforeRouteUpdate(to, from, next) {
    if (to.path !== from.path) {
      window.location = to.path;
    }
  },

为我工作

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

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

有两种方法，

你可以在你的方法处理程序中使用$forceUpdate()

<您的组件@click = " reRender ()" > < /组件>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

你可以给你的组件一个:key属性，并在想要渲染时增加

<your-component:key="index" @click="reRender()" > < /组件>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

使用v-if指令

<div v-if="trulyvalue">
  <component-here />
</div>

因此，简单地将truyvalue的值从false更改为true将导致div之间的组件重新渲染