全国最好网站建设,宁夏城乡建设厅网站,gta5中正在建设的网站,金泉网站建设开发问题#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