引言

前端webapp应用为了追求类似于native模式的细致体验，总是在不断的在向native的体验靠拢；比如本文即将要说到的功能，native由于是多页应用，新页面可以启用一个的新的webview来打开，后退其实是关闭当前webview，其上一个webview就自然显示出来；但是在单页的webapp应用中，所有内容其实是在一个页面中展示的，不存在多页的情况，这时就需要前端开发来想办法实现相应的体验效果。

首先需要说明一下，本文所说的前进刷新后退不刷新是指组件是否重新渲染，比如列表A页面，点击其中的每一项进入详情B页面，然后从B页面后退到列表A页面时，A页面没有重新渲染，也没有重新发送ajax请求。下面，我们就来说说在vue的单页应用中，实现前进刷新后退不刷新的一些实现方案，其他的方案大家可以一起补充。

keep-alive方案

keep-alive是vue官方提供的一种缓存组件实例的方法，vue官网对其用法的介绍：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

正如vue官网的介绍，我们在开发中就可以使用他这一点来缓存后退不用刷新的路由组件。具体的实现思路如下。

1、模板中使用keep-alive来缓存对应的路由组件

在app.vue模板中改写<router-view>，具体可以这样：

<keep-alive>     <router-view v-if="$route.meta.keepAlive">         <!-- 这里是会被缓存的视图组件，比如列表A页面 -->     </router-view> </keep-alive>  <router-view v-if="!$route.meta.keepAlive">     <!-- 这里是不被缓存的视图组件，比如详情B页面--> </router-view>

这种方式需要通过vue路由元信息的配合，当然也可以像下面这样：

<keep-alive include="A">     <router-view>         <!-- 只有路径匹配到的视图组件，如上面的列表A页面会被缓存！ -->     </router-view> </keep-alive>

这种方式缺点是：

需要事先知道路由组件的**name**值，这在大型项目中不是一个特别好的选择。

2、在路由配置文件中配置路由元信息

下面以第一种模板方式来展开介绍。对应上面模板文件中的路由元数据配置如下：

routes: [{         path: '/',         name: 'home',         component: Home,         meta: {             keepAlive: false //此组件不需要被缓存         }     },     {         path: '/list',         name: 'list',         component: List,         meta: {             keepAlive: true //此组件需要被缓存         }     },     {         path: '/detail',         name: 'detail',         component: Detail,         meta: {             keepAlive: false // 此组件需要被缓存         }     } ]

3、在keep-alive组件提供

关键字：