keep-alive缓存某一指定路由实现方式
更新时间：2025年07月31日 08:32:41 作者：Jedi Hongbin
使用路由元信息配合keep-alive实现条件缓存,通过两个router-view和meta变量判断是否缓存特定路由,注意keep-alive优先使用组件的name属性而非路由name,避免常见错误
keep-alive缓存某一指定路由
路由的元信息，可以理解成保存某一路由的特定辨识信息，当辨识信息对上了某些判断，则执行某些操作
正常显示的路由不使用keep-alive缓存
但是某一特定需要使用keep-alive保存操作记录，就可以使用两个router-view，通过判断当前路由的meta信息中的变量的值来决定时候使用keep-alive
<transition> <router-view v-if="!$route.meta.isKeep"></router-view> </transition> <transition> <keep-alive> <router-view v-if="$route.meta.isKeep"></router-view> </keep-alive> </transition>
{
path: "/home/goods",
component: goods,
meta: {
isKeep: true//需要缓存的路由
}
}, {
path: "/home/goodsinfo/:id",
component: goodsInfo
},
keep-alive本身还有辨识路由的方式
还可以用keep-alive提供的三个属性来实现
让keep-alive根据条件来判断是否缓存某一路由，不过keep-alive判断的首先是vue实例的name属性，这里要注意不是路由的name属性，这时一个坑🕳
<transition> <keep-alive exclude="goods"> <router-view></router-view> </keep-alive> </transition>
export default {
name:"goods",
data() {
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue修改数据页面无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue2 element-ui el-checkbox视图不更新问题及解决
作者在开发过程中遇到了视图不更新的问题,最终通过改变一个无关紧要的响应式数据来解决,让视图发生改变2024-12-12
这篇文章主要为大家详细介绍了vue中axios的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了浅谈vue权限管理实现及流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要为大家详细介绍了Vue组件之间的通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家分享了vue2.0构建单页应用最佳实战案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在本篇文章里小编给大家分享的是一篇关于Vue—v-bind动态绑定class的知识点内容，有需要的朋友们可以参考下。2020-01-01
h()函数是Vue.js中的一个工具函数,用于创建虚拟DOM节点,具有更高的灵活性和控制力,本文介绍Vue h函数到底是个啥,感兴趣的朋友一起看看吧2025-02-02
最新评论