Vue 组件传递对象采用 keep-alive 与 localStorage 对比.md

Vue 组件传递对象采用 keep-alive 与 localStorage 对比

两个 vue 组件，A 与 B，A通过路由的方式跳转到B，需要向B传递数据，我们这里传递的数据是由对象组成的数组，也就是引用类型变量。本篇文章的 A 是始终缓存的，也就是始终keepAlive === true。

A页面时一个简单的商品列表及购物车页面：

A中点击提交按钮会跳转到B，B是展示订单的页面：

我们主要考虑可能的用户操作，1.A页面中点击提交按钮路由到B，2.前进后退导航，3.手动刷新页面。看看这些情况下会有怎样的效果。

一、最普通的情况下，A路由跳转到B。

<router-link :to="{ path: '/order',query:{ items: baskets }}"></router-link>
// 这里的 baskets 是 [{},{}]类型

B中在created生命钩子函数获取数据

this.items = this.$route.query.items;

A 是否缓存	B是否缓存	B何时获取数据	点击提交按钮	前进后退导航	刷新页面
true