Vue keep-alive防止重复渲染DOM总结
最新回答
季末╮花未开
2024-09-26 04:43:14
一，VUE单页面应用文件实现返回上一页面时保留之前的数据
最近在做项目时，需要实现下面场景：
在页面查询列表，进入详情页时，返回时需要页面返回到上次浏览的位置（保留之前的当前页和搜索条件数据）
针对上面的 需求：
页面的缓存，我们需要用到vue的内置组件 keep-alive ，来缓存列表页面，同时配合路由选项俩更改页面的数据
1.在路由出口渲染组件时配置：
介绍一下 <keep-alive> 这个内置组件
<keep-alive>是vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive> 包裹动态组件时，而不是销毁他们。和 <transition> 相似， <keep-alive> 是一个抽象组件：他自身不会渲染一个DOM元素，也不会出现在父组件链中。
<keep-alive> 有两个属性：
（1） include ：字符串或者正则表达式，只有匹配的组件会被缓存。
exclude :字符串或者正则表达式，任何匹配的组件都不会被缓存。
2.在需要做缓存的页面加上name
注意需要缓存页面里的name里的名字 要和 include里的名字一致才会缓存。
热门标签
