vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法

页面跳转后回退保持原位置

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'),
    },

实现页面回退之后重新加载，与methods平级写beforeRouteLeave钩子函数，表示在路由页面离开时执行，将该页面的keepAlive属性设为false

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

在详情页配置，页面返回时设置列表页keepAlive为true

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