Vue单页面应用中如何解决路由缓存引起的性能瓶颈问题？

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

单页面应用中的路由缓存问题+通常我们在进行页面前后退时，浏览器会帮我们记录下之前滚动到的位置，这样我们不会在每次后退时都丢失之前的位置。但目前在单页面应用中，这一功能似乎失效了。

单页面应用中的路由缓存问题

通常我们在进行页面前后退时，浏览器通常会帮我们记录下之前滚动的位置，这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位。但是在现在愈发流行的SPA(single page application 单页面应用)中，当我们从父级页面打开子级页面，或者从列表页面进入详情页面，此时如果回退页面，会发现之前我们浏览的滚动记录没有了，页面被置顶到了最顶部，仿佛是第一次进入这个页面一样。这是因为在spa页面中的url与路由容器页面所对应，当页面路径与其发生不匹配时，该页面组件就会被卸载，再次进入页面时，整个组件的生命周期就会完全重新走一遍，包括一些数据的请求与渲染，所以之前的滚动位置和渲染的数据内容也都完全被重置了。

vue中的解决方式

vue.js最贴心的一点就是提供了非常多便捷的API，为开发者考虑到很多的应用场景。在vue中，如果想缓存路由，我们可以直接使用内置的keep-alive组件，当keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

内置组件keep alive

keep-alive是Vue.js的一个内置组件。它主要用于保留组件状态或避免重新渲染。

使用方法如下:

<keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>

keep-alive组件会去匹配name名称为 'a', 'b' 的子组件，在匹配到以后会帮助组件缓存优化该项组件，以达到组件不会被销毁的目的。