vue如何实现页面切换
Vue 实现页面切换的方法
在 Vue 中实现页面切换通常通过路由（Vue Router）完成，以下是几种常见的实现方式：
使用 Vue Router 基础配置
安装 Vue Router 后，在项目中配置路由表，通过 <router-link> 和 <router-view> 实现导航与内容切换。
// main.js 或 router/index.js
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
})
app.use(router)<!-- 导航部分 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<!-- 内容切换区域 -->
<router-view></router-view>动态路由与参数传递
通过动态路由参数实现带状态的页面切换，例如用户详情页。
// 路由配置
{ path: '/user/:id', component: User }<!-- 传递参数 -->
<router-link :to="'/user/' + userId">User</router-link>
<!-- 组件内获取参数 -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>编程式导航
通过 router.push() 或 router.replace() 在 JavaScript 中控制页面跳转。
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到指定路径
router.push('/about')
// 带参数跳转
router.push({ path: '/user', query: { id: '123' } })
// 替换当前历史记录
router.replace('/login')过渡动画效果
为页面切换添加动画效果，通过 Vue 的 <transition> 组件实现。
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}路由守卫控制切换
通过路由守卫（如 beforeEach）在切换前进行权限校验或数据加载。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})嵌套路由
实现多层级的页面布局切换，适用于复杂应用结构。
{
path: '/dashboard',
component: DashboardLayout,
children: [
{ path: 'profile', component: Profile },
{ path: 'settings', component: Settings }
]
}<!-- DashboardLayout.vue -->
<div class="layout">
<sidebar></sidebar>
<router-view></router-view> <!-- 子路由内容 -->
</div>
