vue实现主页切换
路由配置
在 router/index.js 中配置路由规则，定义主页及其他页面的路径。使用 Vue Router 的 createRouter 和 createWebHistory 方法：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;路由视图占位
在根组件（如 App.vue）中添加 <router-view> 标签作为动态内容占位符：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>导航菜单
使用 <router-link> 组件实现导航，通过 to 属性指定目标路径。可配合 CSS 样式高亮当前页：
<router-link
to="/about"
active-class="active-link"
>About</router-link>编程式导航
通过 useRouter 钩子或 this.$router（Options API）实现代码跳转：
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const goToAbout = () => router.push('/about');
return { goToAbout };
}
};动态过渡效果
通过 <transition> 包裹 <router-view> 实现切换动画：
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>CSS 示例：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
