keep-alive缓存多级菜单相关

keep-alive

场景： 多级菜单

二级菜单
信息管理 -> 包含列表、新增、编辑、详情 子页面

需求：
列表页的搜索条件、分页、滚动条位置等状态需要缓存

方法： 使用vue自带keep-alive 组件

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cacheViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
   
  name: 'AppMain',
  computed: {
   
    key() {
   
      return this.$route.path