Vue中如何优化keepAlive缓存同一组件在不同路由间切换的问题？

本文共计1003个文字，预计阅读时间需要5分钟。

不同的路径共用一个组件component，并用keepAlive实现不同页面的缓存+功能：使用列表页面检索的数据跳转到对应的详情页面，从详情页返回列表页能记住上次检索的数据。

不同的路由共用一个组件component，并用keepAlive实现不同的页面缓存

实现功能：使用列表页面检索的数据跳转到对应的详情页面，从详情页回到列表页能记住上次检索的数据，再次切换到详情页时能正常取到对应的数据

实现方式使用Vue keepAlive实现页面缓存，整理了一些资料和其他的博客在这里记录一下。。。。

keepAlive原理：

1，保留组件的状态，在重新进入页面时避免重新渲染。
2、是抽象组件，它自身不会渲染DOM元素，也不会出现在父组件链中。
3、当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。