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
人工智能学习网站