vue实现切换界面
路由配置
在Vue项目中实现界面切换通常基于Vue Router。安装Vue Router后，在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
})
export default router路由视图占位
在根组件（如App.vue）中使用<router-view>作为动态组件的渲染出口：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>导航控制
通过<router-link>组件或编程式导航实现界面跳转：
<!-- 声明式导航 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<!-- 编程式导航 -->
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToAbout = () => router.push('/about')
</script>
<button @click="goToAbout">跳转About页</button>动态路由匹配
需要参数传递时，使用冒号标记动态路径：
// router配置
{ path: '/user/:id', component: User }
// 组件内获取参数
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)导航守卫
通过路由守卫控制切换逻辑，例如验证登录状态：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login')
} else {
next()
}
})过渡动画
为路由切换添加动画效果：
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>嵌套路由
实现多级界面切换时，配置children属性：
{
path: '/user',
component: User,
children: [
{ path: 'profile', component: Profile },
{ path: 'settings', component: Settings }
]
}对应模板中需在父组件内添加嵌套的<router-view>。
