keep-alive的理解

keep-alive用来对组件进行缓存，从而节省性能，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。

它是一个抽象组件，被它包裹的组件状态将会保留。比如在一个页面将内容滑到列表100条的位置，切换到另一个页面在切回来，位置还在100条。但有时会要求每次 进一个新的页面初始化位置都是在最顶端。

。，这里可以利用Vue中的滚动行为，但是前提是你是HTML5 history模式。

我们在创建一个router实例的时候，可以提供一个scrollBehavior方法，该方法会在用户切换路由时触发

const router=new VueRouter({
        routes:[
            {
                path:"/",
                component:Home
            }
        ],
        scrollBehavior(to,form,savedPosition){
        //scrollBehavior方法接收to，form路由对象
        //第三个参数savedPosition当且仅当在浏览器前进后退按钮触发时才可用
        //该方法会返回滚动位置的对象信息，如果返回false，或者是一个空的对象，那么不会发生滚动
        //我们可以在该方法中设置返回值来指定页面的滚动位置，例如：
         return {x:0,y:0}
        //表示在用户切换路由时让是所有页面都返回到顶部位置
        //如果返回savedPosition,那么在点击后退按钮时就会表现的像原生浏览器一样，返回的页面会滚动过到之前按钮点击跳转的位置，大概写法如下：
         if(savedPosition){
            return savedPosition
         }else{
           return {x:0,y:0}
         }
         //如果想要模拟滚动到锚点的行为:
         if(to.hash){
           return {
             selector:to.hash
           }
         }
     }
})

还有一个方法就是利用我们上面说过的，在keep-alive激活会触发activated钩子函数，那么在该函数内设置scrollTop为keep-alive与includ/exclude一块用。

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

 

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

转载链接：https://www.jianshu.com/p/4b55d312d297