vue3 使用路由缓存 keep-alive

app.vue

<template>
    <Suspense>
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component v-if="$route.meta && $route.meta.keepAlive" :is="Component" :key="$route.name"/>
            </keep-alive>
            <component v-if="!($route.meta && $route.meta.keepAlive)" :is="Component" :key="$route.name"/>
        </router-view>
    </Suspense>
</template>
<script lang="ts" setup>
</script>

router.ts

import { createRouter,createWebHashHistory,RouteRecordRaw } from 'vue-router';
type AddRouteRecordRaw=RouteRecordRaw & {
    // hidden?:boolean
}
const routes:AddRouteRecordRaw[]=[
    {
        path: '/',
        name: 'home',
        // @ts-ignore 
        component: () => import('home'),
        meta: { keepAlive: true } 
    },
    {
        path: '/error',
        name: 'error',
        // @ts-ignore 
        component: () => import('error'),
    },
    {
        path: '/walletList',
        name: 'walletList',
        // @ts-ignore 
        component: () => import('walletList'),
    },
    {
        path: '/walletInfo',
        name: 'walletInfo',
        // @ts-ignore 
        component: () => import('walletInfo'),
    },
];
const router = createRouter({
    history: createWebHashHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                top: 0,
                left: 0
            }
        }
    }
});
//路由守卫
router.beforeEach((to, from, next) => {
    next();
})
export default router