vue keep-alive 标签的实践方案

在app.vue中使用keep-alive 标签

<keep-alive include="KeepAlive">
  <router-view  ></router-view>
</keep-alive>

使用include 属性规定keep-alive作用域。
include 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面
exclude 使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面
使用include exclude 属性需要给所有vue类的name赋值（注意不是给route的name赋值），否则不生效

给name赋值的方法：
在vue类中赋值，与data、components等平级
给所有你想要缓存的页面的vue类的name赋值为“KeepAlive”，
给所有你不想缓存的页面的vue类的那么赋值为“noKeepAlive”,

export default {
  name:'KeepAlive',
  components: {

  },
  data () {
    return{
    }
  },
}

经过测试 ，此方法代码简练，容易理解，但当用于实现scroll记忆功能的时候会跟transition 标签冲突，导致添加过渡动画就无法实现scroll记忆功能，希望有高人能指教。