在vuex路由跳转中保留页面缓存及滚动位置

业务场景：

当用户在a页面对列表进行滑动操作后，进入b页面，随后返回至a页面时，该页面能够维持原先的滑动位置，并且保留相应的页面缓存信息。

解决思路概述

通过启用路由中的keepAlive功能，当该参数设置为true时，页面缓存将被保留。（返回该页面时不会触发created和mounted生命周期钩子函数）。

1. 在app.vue中引入缓存机制。
2. 当从a页面跳转至b页面时，需将a页面的keepAlive属性设为true，并记录当前页面的滚动位置。
3. 利用路由守卫进行判断，若目标页面并非b页面，则将keepAlive参数设为false，以避免其他页面跳转至a页面时仍存在缓存。
4. 在activated钩子函数中恢复之前保存的页面滚动高度。

解决方法概述

1.app.vue。使用缓存机制。

    <template>
      <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view  v-if="!$route.meta.keepAlive">
     <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视