vue2.0中keep-alive实践

vue2.0中keep-alive实践

vue2.0提供了一个keep-alive组件，用来缓存组件,避免多次加载相应的组件,减少性能消耗。

1.缓存所有页面

//在router的根页面下

  

2.缓存某些页面

然后在router中为需要缓存的页面的meta对象添加keepAlive属性值。

3.keepAlive属性的另一用法

除了把keepAlive属性设置为是否缓存的判断条件之外，keepAlive还能够在设置滚动行为时使用：

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
      return {x:0, y:to.meta.savedPosition || 0}
    }
  }

利用以上代码对设置缓存了的页面进行返回后自动滚动。