vue3+vue-router+KeepAlive，切换路由依然保持页面状态

App.vue:

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component"></component>
    </KeepAlive>
  </RouterView>
</template>

router/index.js:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/index/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/home',
      component: () => import('../views/home/Index.vue'),
    },
    {
      path: '/me',
      component: () => import('../views/me/Index.vue'),
    },
  ],
})

router.beforeEach((to, from) => {
  return true
})

export default router

home/Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const count = ref(0)

const handleJump = (path: any) => {
  router.push(path)
}

const handleAdd = () => {
  count.value = count.value + 1
}

onMounted(() => {})
</script>

<template>
  <div>
    home
    <button @click="() => handleJump('/me')">me</button>
    <button @click="() => handleAdd()">{{ count }}</button>
  </div>
</template>

me/Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const handleJump = (path: any) => {
  router.push(path)
}
onMounted(() => {})
</script>

<template>
  <div>
    me
    <button @click="() => handleJump('/home')">home</button>
  </div>
</template>

参考链接

https://router.vuejs.org/zh/guide/advanced/router-view-slot.html

人工智能学习网站

https://chat.xutongbao.top