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