vue3.x keep-alive 写法

补充：其实不依赖 defineOptions 插件设置 name 的方式也可以实现。

App.vue

<template>
    <div id="app" class="container">
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
            </keep-alive>
            <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
        </router-view>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
#app {
}
</style>

 

router.js

import { closeToast } from 'vant'
import { Router, createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    { name: 'address', path: '/address', component: () => import('@/views/address/index.vue'), meta: { title: '地址', keepAlive: true } }, },
]

const router: Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,
    history: createWebHashHistory()
})

router.afterEach((to) => {
    closeToast()
})

export default router

 

---

 

App.vue

<template>
    <div id="app" class="container">
        <router-view v-slot="{ Component }">
            <keep-alive :include="['peopleList', 'addressList']">
                <component :is="Component" />
            </keep-alive>
        </router-view>
    </div>
</template>

 

peopleList.vue

defineOptions({ 
    name: 'peopleList' 
})

 

defineOptions 插件

 

vue3 setup 语法糖配置 name 属性需要使用 defineOptions 插件

pnpm i unplugin-vue-define-options

 

vite.config.js

import DefineOptions from 'unplugin-vue-define-options/vite'

plugins: [
    DefineOptions(),
]

 

tsconfig.json

{
    "compilerOptions": {
        "types": ["unplugin-vue-define-options/macros-global"]
    },
}