[JavaScript知识库]Vue keep-alive 缓存路由和刷新路由

1、路由不缓存的时候：tab左右切换页面都会自动刷新，表现形式：工作台Radio选中，然后点DemoTab，再点会工作台，Radio不选中了

<router-view :key="rootkey" style="margin: 5px" />

2、加上Keep-alive后，实现Tab切换页面状态保存 ，比如工作台文本框写的123，切换tab回来后还显示123，不会清空

<keep-alive>

? ? ? ? <router-view style="margin: 5px"></router-view>

</keep-alive>

3、实现Tab的刷新功能，就是点Tab上的刷新按钮，新增exclude、refreshing ，实现的思路：exclude属性标识哪些页面不缓存，当我们点击刷新按钮的时候，先使用v-if把routerview销毁，然后在重新加载view的时候，给exclude属性加上页面的名称，不缓存。最后在nextTick方法执行后，再把exclude设置成空，表示缓存所有页面

<!-- 缓存路由 -->
<keep-alive :exclude="exclude">
    <router-view v-if="!refreshing" style="margin: 5px"></router-view>
</keep-alive>

data方法

data() {
    return {
      refreshing: false,
      exclude: "",
    };
},

给路由加一个 componentName

const router = new Router({
  routes: [
    {
      path: "/login",
      name: '登录页',
      component: () => import('@/common/login/index')
    },
    {
      path: '/',
      name: '首页',
      component: () => import('@/layouts/PageLayout'),
      children: [
        {
          path: "/welcome",
          component: () => import('@/pages/Welcome'),
          meta: {
            //原组件的名称
            componentName: "Welcome" 
          }
        },
        {
          path: "/demo",
          component: () => import('@/pages/DemoPage'),
          meta: {
            //原组件的名称
            componentName: "DemoPage" 
          }
        },
        {
          path: "/demo2",
          component: () => import('@/pages/Demo2'),
          meta: {
            //原组件的名称
            componentName: "Demo2" 
          }
        }
      ]
    }
  ]
});

刷新方法

//刷新
    onReload() {
    
        this.exclude = this.$route.meta.componentName;
        this.refreshing = true;
        setTimeout(() => {
          this.refreshing = false;
          this.$nextTick(() => {
            this.exclude = "";
          });
        }, 200);
    
    },