vue使用keep-alive注入数据缓存不刷新

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop:

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 在2.1.0版本Vue中 常见用法：结合router，缓存部分页面 使用$route.meta的keepAlive属性：

需要在router中设置router的元信息meta：

export default new Router({
routes: [
{
path: ‘/‘,
name: ‘MyMusic’,
component: MyMusic,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: ‘/findmusic’,
name: ‘FindMusic’,
component: FindMusic,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})

使用效果

初次打开推荐页面会请求数据 回到我的音乐界面 再次回到推荐歌单页面，刚刚请求过的数据会被保存，不会再重新请求