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目前的问题所在。

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

只需使用你的任何参数的关键，它的自动重载子..

有两种方法，

你可以在你的方法处理程序中使用$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>

使用vm。美元(varName,价值)。

在Change_Detection_Caveats中查看详细信息

尝试使用这个。$router.go(0);手动重新加载当前页面。

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

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