keep-alive缓存某一指定路由实现方式
作者：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() {
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。