博客

在浏览商品时，点击商品详情，然后返回，要求列表刷新，同时滚动条还在之前的位置，拿Vue为例的实现思路：

（1） 实现页面跳转回退保持原位置

需要在 App.vue 页面中使用 keep-alive 缓存组件：

<template>
  <div id="app">
    <keep-alive >
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

路由配置里在需要被缓存的页面 meta 里配置 keepAlive 属性：

{
  path: '/index',
  name: 'index',
  
  meta: {
    title: ' ',
    keepAlive: true, //此组件需要被缓存
  },
  
  component: () => import('@/components/index'),
}

（2） 实现页面回退之后重新加载

在组件里定义 beforeRouteLeave 钩子函数，表示在路由页面离开时执行，将该页面的keepAlive 属性设为 false：

beforeRouteLeave (to, from, next) { 
    from.meta.keepAlive = false;
    next();
}

在详情页组件里定义 beforeRouteLeave 钩子函数，页面返回时设置列表页 keepAlive 为 true：

beforeRouteLeave (to, from, next) {
    if (to.path == "/index") {
        to.meta.keepAlive = true;
    } else {
        to.meta.keepAlive = false;
    }
    next();
}