邯郸网站建设地方,广西桂林理工大学,德州整站优化,百度搜索网页版入口问题#xff1a;从首页卡片点到详情页#xff0c;又点返回#xff0c;数据重新加载了-希望回到原来的位置
原因#xff1a;路由跳转后#xff0c;组件被销毁了#xff0c;返回回来组件又被重建了#xff0c;所以数据重新被加载了
解决#xff1a;利用keep-alive将…问题从首页卡片点到详情页又点返回数据重新加载了-希望回到原来的位置
原因路由跳转后组件被销毁了返回回来组件又被重建了所以数据重新被加载了
解决利用keep-alive将组件缓存下来
keep-alive是什么
keep-alive是Vue的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive是一个抽象组件它自身不会渲染成一个DOM元素也不会出现在父组件链中只是一个容器。
keep-alive的优点
在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM减少加载时间及性能消耗提高用户体验性。
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/template
问题缓存了所有被切换的组件
keep-alive是三个属性
1include组件名数组只有匹配的组件会被缓存
2exclude组件名数组任何匹配的组件都不会被缓存
3max最多可以缓存多少组件实例
templatediv classh5-wrapper :include[LayoutPage]keep-aliverouter-view/router-view/keep-alive/div
/template
组件名name命名的如果没有配置name才会找文件名作为组件名
被缓存的组件会多两个生命周期钩子
1actived激活时组件被看到时触发-进入页面时触发
2deactived失活时组件看不见时触发-离开页面时触发
组件缓存了就不会执行组件的created、mounted、destroyed等钩子所以提供了actived和deactived
