Vue动态路由缓存不相互影响的解决办法

<div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</div>
</template>

<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class MainApp extends Vue {

}
</script>

上面代码会把页面全部都缓存下来（路由切换回来的时候，页面表单填写的内容没有被清空）,这是应为在<router-view />的外面包裹着keep-alive标签, 页面数据都保留下来了，避免用户切换路由，数据丢失的情况,看似很完美！

比如一个产品页面：

当两个路由都使用同一个组件如Product.vue这个组件时，来回切换两个路由，两个页面填写的东西就会共用！切换页面时，发现页面自动填写了上个页面的东西，这并不是我们想要的!

如果页面比较少, 比如只有A、B两个产品，可以每个页面都定义一个路由地址，并且name属性不一样的值:

{
 path: '/product',
 name: 'product',
 component: Product,
 children: [
  {
   path: 'a',
   name: 'aProduct',
   component: Detail
  },
  {
   path: 'b',
   name: 'bProduct',
   component: Detail
  },
 ]}

这时这样

<router-view :key="$route.name"/>

就解决上面的问题了

But，页面较多的时候，定义路由就不能像上面这样定义了:

{
 path: '/product',
 name: 'product',
 component: Product,
 children: [
  {
   path: 'detail/:id',
   name: 'aProduct',
   component: Detail
  },
 ]}

此时路由变成了动态的了，那么，key就不能取name的值了，此时就需要引入一个变量来存储路由的历史记录了，当路由切换时，在历史记录中匹配相应的路由，在历史记录中保存的一个位置值，取出来赋值个key就可以了

嗯，前面好像废话有点多，而且貌似有骗标题的嫌疑，其实理解key这个属性，对于解决页面缓存，组件重复不相互影响有重要的作用。