keep-alive

作用：避免多次重复渲染降低性能，组件可以缓存下来,维持当前的状态
app.vue

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

2.在路由中设置keepAlive

{
  path: 'home',
  name: 'home', // 首页
  component (resolve) {
    require(['@/pages/home'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '首页'
 }
}

3.更改 beforeEach钩子

判断页面是在前进还是后退

let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('back...')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}

4、记录页面滚动位置

keep-alive并不会记录页面的滚动位置

（1）在deactivated钩子中记录当前滚动位置，使用localStorage：

deactivated () {
 window.localStorage.setItem(this.key, JSON.stringify({
 listScrollTop: this.scrollTop
 }))
}

（2）在activated钩子中滚动

this.cacheData = window.localStorage.getItem(this.key) ？JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)