router/index.ts:
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
App.vue:
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView v-slot="{ Component }">
<Transition name="m-trans">
<KeepAlive>
<component :is="Component"></component>
</KeepAlive>
</Transition>
</RouterView>
</template>
<style>
body {
overflow-x: hidden;
}
.m-trans-enter-active {
transition: all 1s ease-out;
}
.m-trans-enter-from {
transform: translateX(200px);
opacity: 0;
}
</style>
参考链接
https://cn.vuejs.org/guide/built-ins/transition.html
人工智能学习网站