ts project page caching

1. Add the component needs to be cached page

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

2. Add relevant router.ts in
keepAlive is true is the need for cache, and set isBack property, to identify whether the page is returned from the details page.

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

3. Add the assembly in the cache page
in ts project, if there is no code, beforeRouteEnter will not take effect

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

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

4. To enter a different page, the update page list data and query, we will hang in the hook function activated at the time of the initial entry page request data. When entering the details page, the article data need to be modified, the modified successful return, the list should be updated.

activated() {
    console.log(this.$route.meta.isBack);
    
    if (!this.$route.meta.isBack) {
      this.getAgents(0);
    }else{
      this.$route.meta.isBack = false;
      this.getAgents(this.pageNum);/*列表重新加载*/
    }
  }

5. The personal opinions on that page caching, wrong please correct me if there is
a so-called cache page is the first time you enter the page, created will request data; staying at the page or enter the sub-route will no longer perform the Created;
b however. actived will be implemented, so if we need to refresh the data in a particular case requires the use of actived + his $ route.meta.isBack judge;.
. when c data cached page after entering the other sub-route, re-enter its pages data will not be updated, it will still retain the previous operation data data

Reference article: https: //blog.csdn.net/weixin_34128237/article/details/88693417