因此这里我还是使用 afterEach 来处理路由维护，这样在支持回退多步的时候也比较容易去扩展：
router.afterEach((to, from) => {
if (dir === 1) {
includes.push(to.name);
positions.push({});
} else if (dir === -1) {
includes.pop();
unkeepPosition(positions.pop({}));
restorePosition();
}
dir = -1;
});const restorePosition = function () {
Vue.nextTick(() => {
const parent = positions[positions.length - 1];
for (let key in parent) {
const { el, x, y } = parent[key];
el.scrollLeft = x;
el.scrollTop = y;
}
});
};
const unkeepPosition = function (parent) {
for (let key in parent) {
const obj = parent[key];
obj.el.removeEventListener('scroll', obj.handler);
}
};
最后，我们分别给我们的列表加上我们的指令就可以了：
<div style="flex: 1;overflow: scroll;" v-keep-position="'list1'">
<!-- -->
</div>
<div style="flex: 1;overflow: scroll;" v-keep-position="'list2'">
<!-- -->
</div>
