记录一次Vue项目中的缓存问题

项目升级到vue-cli3之后，之前一些遗留的代码变成习惯都需要更改。所以，在公司的项目上，这几个月一直在做重构性的工作。

工作主要涉及到一下几点：

1、项目从v2迁移到v3，除了一些页面迁移工作，还需要把环境配置，npm包的取舍做好。

2、对比较乱的初始项目做了项目文档，梳理了开发规范和代码规范，应用好Eslint和Airbnb代码检查。不过这一块由于Airbnb规范校验的比较严格，又手动更改了代码检查规则。

3、对公司的插件的再封装，许多ui组件应用太过于混乱。

4、因为公司有内外网环境并行，感觉很难做到持续集成，略感遗憾。

5、Git提交规范梳理，约定好提交规则，后期如有可能，写入hooks，自动校验

除了做这些工作，其余的时间都是在忙公司的项目。

最近在做项目的时候，也遇到了一个刚升级有点懵逼的问题，毕竟我之前搞React，对Vue项目的熟练度还待提高。

这次遇到的问题大多数小白可能也遇到过，我也就此记录一下，勉强算是一个经验之谈。

事情是这样的：

项目中，用到router的keep-alive设置，之前一直都设置在路由的meta中，在新项目中，这次就需要缓存的组件做了单独的配置，所以写在了App.vue的路由参数里面格式如下：

<transition :name="transitionName">
      <keep-alive include="要配置的路由字符串，以逗号分隔">
          <router-view></router-view>
      </keep-alive>
 </transition>

不过在配置了include参数之后，发现页面的push依旧还总是重新构建页面，导致v-modal绑定显示失败，跳转到选择页面再回来，也会导致页面重新构建，之前的数据丢失问题。

当时百思不得其解，后来在各种尝试之下，才知道用name参数可以解决这个问题。

就是将你要缓存的路由页面配置name属性，如下：

export default {
    props: [],
    name: '设定name'，// 此处为解决方案
   data() {}
}

按理说，这应该算是常识问题，倒是耗费了两个小时时间，感觉实在是浪费生命，于是才有了记录这篇文章的必要。