25.Vue Router路由缓存

  vue Router缓存路由keep-alive

  平时开发应用，有那种多tab的表单；

  类似图上，多tab页，我们要保证 用户切换的时候，表单数据依然存在；

  我们把前面的实例，两个子菜单，都加个input；

<div>
  子菜单1内容
  <input type="text">
</div>

  我们发现 每次切换，文件框里的数据都没了，说明每次切换，路由组件都销毁掉，每次点开重新生成；

  如何解决这个问题呢；

  vue提供了keep-alive来轻松实现，路由组件缓存；

  Menu1.vue里：

<template>
  <div class="main">
    <div class="menu">
      <ul>
        <li>
          <router-link to="/menu1/submenu1">子菜单1</router-link>
        </li>
        <li>
          <router-link to="/menu1/submenu2">子菜单2</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <!--keep-alive设置路由缓存-->
      <keep-alive>
      <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Menu1'
  }
</script>

<style scoped>

  .main{
    display:flex;
  }

  ul li{
    padding-left: 20px;
    list-style-type: none;
  }

  ul li a{
    text-decoration: none;
  }

  .content{
    padding: 30px;
  }
</style>

  我们会发现 两个子菜单路由组件缓存了，但是点 首页，再切换回来，又失效了，因为我们父路由组件没缓存，如果要缓存；

  我们在App.vue里再加下keep-alive即可；