开发避坑指南(55)：基于路由守卫的Vue2/Vue3 Tab页查询状态保留方案

问题

在Vue2/Vue3页面开发过程中，经常需要遇到切换tab页面后，原页面刷新，然后查询条件被清空的问题，很不友好。那么Vue2/Vue3中如何实现切换tab页面后不刷新页面，保留上一次的查询条件？

解决办法

保持组件名和路由名称一致即可。

Vue2

比如orderMng.vue中组件名称是OrderManage

export default {name: 'OrderManage',...
}

那么dynamicRoutes.js中路由地址中的也是order-manage

{path: 'OrderManage',name: 'OrderManage',meta: {name: '订单管理',title: '订单管理'},component: () => import('@/views/order/orderManage')}

Vue3

Vue3中则是在setup中指定组件的名称。

<script setup name="OrderManage">

原理

keep-alive是Vue中的一个内置组件，用于缓存不活动的组件实例，避免重复渲染DOM，从而优化性能。

组件名称和路由地址一致能实现缓存的核心机制在于的include属性通过组件名称（name）匹配缓存实例。当路由地址作为组件名称时，动态路径参数会生成唯一标识，确保不同路由实例独立缓存。