iframe vue 前进 后退_vue单页应用前进刷新后退不刷新方案探讨

引言

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

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

keep-alive方案

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

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

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

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

在app.vue模板中改写，具体可以这样：

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

这种方式缺点是：

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

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

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

routes: [{

path: '/',

name: 'home',

component: Home,

meta: {

keepAlive: false //此组件不需要被缓存

}

},

{

path: '/list',

name: 'list',

component: List,

meta: {

keepAlive: true //此组件需要被缓存

}