vue路由缓存，结合router-view中key属性进行配置

文件目录
2.路由配置详情

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Layout from '../views/Layout.vue';
import Redirect from '../redirect/redirect.vue';
import problemManage from '../views/problem-manage.vue';
import kpiReport from '../views/kpi-report.vue';
import Preview from '../views/preview.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/layout',
    name: 'layout',
    component: Layout,
    children: [
      {
        path: 'redirect/:name',
        name: 'redirect',
        component: Redirect
      },
      {
        path: 'robotaxi',
        name: 'robotaxi',
        redirect: {
          name: 'problem-manage'
        },
        component: Redirect,
        children: [
          {
            path: 'problem-manage',
            name: 'problem-manage',
            component: problemManage,
            meta: {
              keepAlive: true
            }
          },
          {
            path: 'kpi-report',
            name: 'kpi-report',
            component: kpiReport
          },
          {
            path: 'preview',
            name: 'preview',
            component: Preview
          }
        ]
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

export default router;

home页面

<template>
  <div @click="handle">
    HOME
  </div>
</template>
<script>
export default {
  methods: {
    handle() {
      this.$router.push('layout');
    }
  }
};
</script>

kpi-report页面

<template>
  <div>kpi-report</div>
</template>

layout页面 此页面为主页面 控制组件缓存的逻辑都在这个页面

<template>
  <div>
    <div>
      layout
      <ul>
        <li
          @click="
            () => {
              $router.push('/layout/robotaxi/problem-manage');
            }
          "
        >
          robotaxi
        </li>
        <li
          @click="
            () => {
              $router.push('/layout/robotaxi/preview');
            }
          "
        >
          preview
        </li>
        <li
          @click="
            () => {
              $router.push('/layout/robotaxi/kpi-report');
            }
          "
        >
          kpi-report
        </li>
      </ul>
    </div>
    {{ routeKey }}
    <router-view :key="routeKey" />
  </div>
</template>
<script>
// 需要做缓存的页面
const KEY_VALU = {
  /**
   * example 从preview页面进入problem-manage需要缓存
   * 1.需要配置'problem-manage': 'problem-manage' 让其进入problem-manage这个页面时router-view中key为
   * problem-manage的value值
   * 2.当进入preview页面时 其值也为problem-manage 此时组件复用
   * 3.当进入kpi-report时 由于在KEY_VALUE中没有kpi-report的值所以返回值为fullPath导致router-view值变
   * 化强制不复用组件 路由不进行缓存
   */
  'problem-manage': 'problem-manage',
  preview: 'problem-manage'
};
export default {
  computed: {
    routeKey() {
      console.log(KEY_VALU[this.$route.name]);
      return KEY_VALU[this.$route.name] || this.$route.fullPath;
    }
  }
};
</script>

preview页面

<template>
  <div
    @click="
      () => {
        $router.push('problem-manage');
      }
    "
  >
    preview
  </div>
</template>

problem-manage页面

<template>
  <div>problem-manage{{ Math.floor(Math.random() * 100) }}</div>
</template>

robotaxi页面

<template>
  <div>robotaxi</div>
</template>

redirect页面 此页面做路由缓存

<template>
  <div class="redirect">
    <keep-alive>
      <router-view class="redirect" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
export default {};
</script>