一般国产味道的后台界面，都会有一个类似于浏览器tab标签的东西
大概就是这样的，可以点击标签切换不同的路由，并且不丢失之前录入的数据。
但是vue-router默认是不支持该操作，需要借助vue内置的keep-alive组件来解决
路由
路由需要设置name和meta两个属性，meta下加上一个keep属性，true表示当前路由需要缓存，false则不需要缓存
const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/home', name: 'home', component: HomeView, meta: { keep:false } }, { path: '/about', name: 'about', meta: { keep:true }, component: () => import('../views/AboutView.vue') } ] })
keep-alive使用
keep-alive需要放在router-view下，判断route的keepp属性，是否需要通过keep-alive缓存当前路由
<RouterView v-slot="{ Component }"> <KeepAlive> <component :is="Component" :key="$route.name" v-if="$route.meta.keep"></component> </KeepAlive> <component :is="Component" :key="$route.name" v-if="!$route.meta.keep"></component> </RouterView>
使用
做完前面步骤，只需要正常按照vue的开发模式写业务逻辑，就可以实现tab路由缓存了。
