最近在做PC端前端项目中，需要实现以下场景：
1.在页面查询列表，进入详情页时，返回需要页面返回到上次浏览的位置（保留列表之前的当前页和搜索条件数据）
2.由于查询列表获取的数据可能会短时间改变，如果前端长时间缓存数据，并不符合业务要求。
3.我在进入详情页时可以修改列表的数据，返回时滚动到，用户看到的应该是最新的数据
4.每个列表页面需要保存当前页和搜索条件数据。
针对以上前几点：
页面的缓存，我们需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数
1.在路由出口渲染组件时配置：
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="router-view">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" class="router-view" ></router-view>
2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。
{
name: '首页',
path: 'index',
component: Index,
meta: {
keepAlive: true,
isBack: false
}
},
3.在组件实例中，通过beforeRouteEnter(to, from, next)路由守卫，来判断路由是从哪里跳转的，如果是从详情页跳转的，则将当前路由对象的meta.isBack 设置为true,否则设为false
beforeRouteEnter(to, from, next) {
if (from.path == "/detail") {
to.meta.isBack = true;
} else {
to.meta.isBack = false;
}
next();
},
为了在其他页面进入时，更新页面中的列表数据，我们将在activated钩子函数中挂载页面初次进入时的请求数据：
activated() {
if (!this.$route.meta.isBack) {
this.list = [];
this.pageNum = 1;
this.getList();
}
this.$route.meta.isBack = false;
},
4.在进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。
由于我们要在返回时滚动到浏览位置，因此不能去后台重新请求数据(否则无法回到之前浏览的位置)，而是采用前端保存修改的数据，并在返回的activated钩子中对当前列表数据修改。
需要注意的事项：
由于vue自身限制，不能检测到数组直接修改长度和利用索引设值 因此，需要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)
然后根据页面离开时保存的滚动位置，将页面滚动到浏览位置。在router-view入口处，watch，$route对象，将keep-alive为true的页面，滚动到上次浏览位置。
5.在页面列表中，我们需要用到分页加载数据，即滑动加载
在keep-alive组件中，页面离开时，并不会销毁当前的vue实例，而是保存在内存中。因此就会造成问题：页面跳转时，触发了滑动事件，加载所有保存在内存中的滑动事件，改变了vue实例的数据。
因此，我们需要在组件的路由守卫中，在页面离开时beforeRouteLeave中把滑动事件禁用，然后再在页面进入的时候，在activated钩子中恢复滑动事件的。
注意： 使用keep-alive不能销毁实例,vm.$destroy(); 否则再进入页面，即使keep-alive为true也不会保存组件。如果keep-alive的页面较多，可以使用,在路由守卫中修改vuex的变量动态改变keep-alive的页面变量。
网友评论