vue-router之keep-alive

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