如何通过Vue实现复杂的前端页面长尾词缓存策略？

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

目录 + Vue前端页面缓存

1.使用场景

2.keep-alive基本认识

3.keep-alive实现路由页面缓存

Vue页面缓存问题

1.路由设置

2.页面路由嵌套设置

3.从指定页面返回使用缓存

目录

• Vue前端页面缓存
• 1.使用情景
• 2.keep-alive基本认识
• 3.keep-alive实现路由页面缓存
• vue页面缓存问题
• 1.路由设置
• 2.页面路由嵌套设置
• 3.从指定页面返回使用缓存数据

Vue前端页面缓存

1.使用情景

在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，

比如：

• 在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
• 在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。