一,VUE单页面应用文件实现返回上一页面时保留之前的数据
最近在做项目时,需要实现下面场景:
在页面查询列表,进入详情页时,返回时需要页面返回到上次浏览的位置(保留之前的当前页和搜索条件数据)
针对上面的 需求:
页面的缓存,我们需要用到vue的内置组件keep-alive
,来缓存列表页面,同时配合路由选项俩更改页面的数据
1.在路由出口渲染组件时配置:
<keep-alive include = 'products'>
<router-view> </router-view>
</keep-alive>
介绍一下<keep-alive>
这个内置组件
<keep-alive>是vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,而不是销毁他们。和<transition>
相似,<keep-alive>
是一个抽象组件:他自身不会渲染一个DOM元素,也不会出现在父组件链中。
<keep-alive>
有两个属性:
(1)include
:字符串或者正则表达式,只有匹配的组件会被缓存。
exclude
:字符串或者正则表达式,任何匹配的组件都不会被缓存。
2.在需要做缓存的页面加上name
export default{
name:'products',
data(){
return{
}
}
}
注意需要缓存页面里的name里的名字 要和 include里的名字一致才会缓存。