vue中详情页改变状态使列表页保存页码的基础上刷新状态
最近在项目中遇到了一个需求,在详情页改变列表页也存在的状态时,列表页需要在保持页码的状态下刷新状态,但是这个需求是在路由中不携带页码而且没有把页码存在storage的基础上实现的,于是小仙女查阅各大资料均没有头绪,最终经过反复试验测试,终于有了思路!
其实有两种方法可以解决:
一、使用keep-alive+new Vue()(推荐)
- 首先按照我们大家都能查到的资料使用keep-alive
在App.vue中
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
在需要缓存的路由上加上meta标志
{
path: '/flight/task',
name: 'FightManage',
props: true,
component: () => import('@/views/flight/FightManage'),
meta: { title: '飞行管理', keepAlive: true }
}
在详情页设置返回
<a-button type=