vue页面列表缓存的方式

使用场景：当从列表页跳转到详情页后再返回列表页时，列表页需要保持原有查询条件和页码不刷新，实现方式如下：

1、在路由中设置是否缓存标识

//设置keepalive标识是否缓存页面
//列表页设置为true
{
    path: '/order/orderlist',
    name: 'orderlist',
    component: () => import('@/views/order/orderlist.vue'),
    meta: {
        title: '订单列表',
        keepalive:true
    },
}

//详情页设置为false
{
    path: '/order/orderdetail',
    name: 'orderdetail',
    component: () => import('@/views/order/orderdetail.vue'),
    meta: {
        title: '订单详情',
        keepalive:false
    },
}

2、在页面中使用keep-alive

//max表示最大缓存页面数
//需要页面缓存
<keep-alive :max="1">
    <router-view v-if="$route.meta.keepalive"></router-view>
</keep-alive>
//不需要页面缓存
<router-view v-if="!$route.meta.keepalive"></router-view>