方法一 会闪屏体验感不好

一、this.$router.go(0)
相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好；

二、location.reload()
这种也是一样，画面一闪，体验不是很好，相当于页面刷新

方法二 依赖注入

使用：

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

<template>
  <div id="app">
    <!-- <router-view  :key="$route.fullPath"></router-view> -->
    <!-- <router-view></router-view> -->

    <keep-alive>
      <router-view :key="activeDate" v-if="$route.meta.keepAlive">
        <!--这里是会被缓存的路由-->
      </router-view>
    </keep-alive>
    <router-view :key="activeDate" v-if="!$route.meta.keepAlive">
      <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
    </router-view>
  </div>
</template>

<script>
export default {
  components: {},
  provide() {
    return {
      // 利用v-key的变化来触发页面更新
      reload: this.reload
    };
  },
  data() {
    return {
      activeDate: Date.now()
    };
  },
  methods: {
    reload() {
      // 1.子组件通过调用 reload 方法来触发activeDate值的变化
      this.activeDate = Date.now();
    }
  }
};
</script>

<style lang="scss">
@import '@/assets/css/common.scss';
</style>

方法三

blog.csdn.net/weixin_4481…

<template>
  <div id="app">
    <!-- <router-view  :key="$route.fullPath"></router-view> -->
    <!-- <router-view></router-view> -->

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive && isRouterAlive">
        <!--这里是会被缓存的路由-->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive && isRouterAlive">
      <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
    </router-view>
  </div>
</template>

<script>
export default {
  components: {},
  provide () {
    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true, //控制视图是否显示的变量
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true //再打开
      })
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/common.scss";
</style>

方法四：空页面

<template>
  <div class="blank"></div>
</template>

<script>
// 需要刷新的页面：
//  refresh() {
//       this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
//  },
//路由
// {
//     path: "/blank",
//     component: () => import('../components/HelloTest.vue'),
//     meta: {
//       keepAlive: true,
//     }
// }
export default {
  name: "BlankPage",
  created () {
    this.$router.replace(this.$route.query.redirect)
  },
};
</script>


<style scoped>
</style>

方法五

forceUpdate() 强制更新vue实例，用来解决 vue 添加不在data中属性，页面不会响应式展现值的，当然使用 this.$set更好，这里我就不一一作比较了

刷新子组件

home：

 <button @click="refreshPageHandler">刷新页面</button>
   <Children :key="key"></Children>
  data: ()=>({ key: 0, });
  methods: {
    refreshPageHandler() {
      console.log("点击刷新页面")
      this.refresh()
    },
    keyUpdate() {
      this.key = Date.now()
    }
  },

child:

 <template>
   <div class="children">
     <h1>子组件刷新</h1>
   </div>
</template>

<script>
export default {
  name: 'Children',
  data() {
    return {

    }
  },
  mounted() {
    console.log("子组件刷新")
  }
}
</script>

<style>

</style>

参考：www.jianshu.com/p/139fedc59…

blog.csdn.net/qq_38431303…