Vue中如何实现多个路由共用一个组件且使用keepAlive缓存，形成长尾关键词？

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

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

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

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

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

keepAlive原理：

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

实现

在app.vue中改写router-view

<keep-alive :include="cachedViews" :exclude="disCachedViews"> <router-view/> </keep-alive>

注意 cachedViews里面存的是由路由name构成的数组，数组的name需与组件的name一致，否词不能达到缓存的效果。