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();},