社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
解决方案使用keepAlive
在 App.vue 插入以下代码:
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
在 index.js 中修改并添加以下代码:
{
path: '/A',
name: '列表页',
meta: {
keepAlive: true // 需要被缓存
},
component: () =>
import( /* webpackChunkName: "views" */ '@/****/*****')
},{
path: '/B',
name: '事件详情',
meta: {
keepAlive: false // 需要被缓存
},
component: () =>
import( /* webpackChunkName: "views" */ '@/****/***')
}
在A页面写入:
beforeRouteLeave(to, from, next) {
if(from.name=='事件详情'){
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存,即不刷新
}
console.log(from);
next();
}
写入位置,如图:
写到这就可以实现啦
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!