ts项目keepAlive的使用

1.在需要缓存的页面组件中添加

<keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

2.相关的router.ts中添加
keepAlive为true即为需要缓存，同时设置isBack属性，用来标识页面是否是从详情页面返回的。

{
      path: 'stock',
      name:'stock',
      meta: { txt: '库存',keepAlive: true,isBack: true},
      icon: 'iconstock',
      component: () => import(/* webpackChunkName: "channel" */ './Stock.vue'),
 },

3.在进入详情页前,将必要参数添加到路由中

this.$router.replace({
      query: {
        level: String(this.status),
      },
    });
 //本段代码会在原有路由中添加level参数
 //http://192.168.xx.xx:8080/#/home/netWork?level=agoing

4.在缓存页面组件中添加
在ts项目中,如果没有这段代码,beforeRouteEnter将不会生效

Component.registerHooks([
    'beforeRouteEnter',
 ]);

beforeRouteEnter(to, from, next) {
    if (from.path == "/channel/detail") {
        to.meta.isBack = true;
      } else {
        to.meta.isBack = false;
      }
      next();
  }

5.为了在其他页面进入时，更新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。

activated() {
    if (this.$route.meta.isBack) {
      // 是返回的页面
      //获取路由中保留的状态数据并刷新数据
      this.status = String(this.$route.query.level);
      this.getAgents(this.pageNum);/*列表重新加载*/
    }else{
      // 不是返回的页面
      this.status = "nonbegin";
      this.$route.meta.isBack = false;
      this.getAgents(0);
    }
  }

6.个人对页面缓存的一点见解,如果有错欢迎指正
a.所谓的页面缓存就是首次进入页面时，created会请求数据;停留在该页面或者进入子路由都不会再执行created;
b.但是actived会执行,因此如果我们需要在特定的情况下刷新数据需要使用actived+his.$route.meta.isBack来判断;
c.缓存页面的数据在进入其他子路由后,再次进入时,其页面的data不会更新,还是会保留上次操作的data数据

7.近期使用该方法是发现了个意外的错误(202/07/02,办法已更新)
a.当我们在详情页刷新后,返回上一页时,数据会被清除
b.原因大概是详情页刷新会导致数据清除,但上一页并不会发请求
c.解决办法将重新加载页面的参数保存在路由中,当检测到是返回页面时,重新发请求
参考文章:https://blog.csdn.net/weixin_34128237/article/details/88693417