vue项目的刷新方式，和需要注意的问题，丢失状态

解释一下什么是丢失状态，比如在data中有一个变量temp，过程中值为2，当刷新之后temp的值变成初始值，这就是丢失状态。丢失状态有什么不好的后果，比如用户在浏览第5页的数据，删除了其中一条数据，直接跳到了第一页。我测试了下面4种刷新处理方式，都会丢失状态

1、 location.reload()，直接全局刷新，回到首页，会丢失状态

2、this.$router.go(0)，需要使用路由，回到首页，会丢失状态

3、路由跳转的方式

比如让页面到一个空白页，再回到需要的页面，页面能刷新，但是会丢失状态。丢失状态原因路由在跳到空白页的时候，会把原来的路由页面销毁（为了减少性能消耗，你可以调用destory方法验证），再跳回来肯定就是状态丢失了

跳转到Empty路由页面

    this.$router.replace({
      path:'/Empty'
    })

在Empty页面的mounted方法写跳回来即可

需要注意的是，如果在一个方法里面写两次跳转，等同于写一次第二次的跳转
比如

myReload() {
      this.$router.replace({
        path: "/Empty",
      });
      console.log("myReload()成功执行");
      this.$router.replace({
        path: "/",
      });
    },

实际效果会是，直接跳转到/，/Empty不生效

4、 provide / inject组合，provide就是提供的意思

在App.vue文件中写入这些，直接给你们看我的代码

<template>
  <div>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import MyTable from "./components/MyTable.vue";

export default {
  name: "App",
  components: {},
  data() {
    return { 
    //控制router-view是否显示的属性
    isRouterAlive: true };
  },
  methods: {
  	//执行方法
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  //注册提供key，value方式，前面是引用名，后面是需要调用的方法
  provide() {
    return {
      reload: this.reload,
    };
  },
  mounted() {
  },
};
</script>

在App.vue里面provide好了
接着在需要的组件里面inject:[‘reload’],就能直接通过this.reload调用了，如图