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过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下2019-03-03
使用element-ui table expand展开行实现手风琴效果
这篇文章主要介绍了使用element-ui table expand展开行实现手风琴效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要给大家介绍了关于axios不能使用Vue.use()的相关资料，文中通过示例代码介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了vue v-model的相关资料，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在前后端分离项目中,跨域是一定会出现的问题,下面这篇文章主要给大家介绍了关于Vue学习笔记之跨域的6种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
插槽（Slot）是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下2022-03-03
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧2018-08-08
最新评论