vue-router之keep-alive

该文章由 leevare 发布于 ,归类于 Javascript

keep-alive可以为组件保留状态,避免重复渲染。

在这个标签上还有这样两个属性

include – 字符串或正则表达,只有匹配的组件会被缓存

exclude – 字符串或正则表达式,任何匹配的组件都不会被缓存



<!-- name 为 Hello 的组件将被缓存! --> 可以保留它的状态或避免重新渲染


<!-- 除了 name 为 Hello 的组件都将被缓存! --> 可以保留它的状态或避免重新渲染

当使用vue路由渲染页面时,为了不用每次重新渲染页面时重新发送请求,可以在vue-router上添加keep-alive属性,这样,会将数据暂时缓存起来,每次渲染页面就不会重新发送请求了。



<!-- 所有路径匹配到的视图组件都会被缓存! -->

但是,如果需要指定某些路由需要被缓存,某些路由不用被缓存时该怎么做呢?

可以使用meta属性在路由配置时指定。

export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]

在路由渲染的时候进行检测



<!-- 这里是会被缓存的视图组件,比如 Home! --> <!-- 这里是不被缓存的视图组件,比如 Edit! -->

文章内容参考自:http://www.jianshu.com/p/0b0222954483

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒