vue界面实现页面切换
实现页面切换的基本方法
在Vue中实现页面切换通常使用Vue Router，这是Vue.js官方的路由管理器。通过配置路由，可以轻松实现单页面应用（SPA）的页面切换效果。
安装Vue Router依赖：
npm install 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: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在主文件中引入路由
在main.js中引入并使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在组件中使用路由链接
在模板中使用<router-link>创建导航链接，使用<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>，还可以通过代码实现页面跳转：
methods: {
goToAbout() {
this.$router.push('/about')
}
}路由参数传递
可以通过动态路由传递参数：
// router/index.js
{
path: '/user/:id',
name: 'User',
component: User
}在组件中获取参数：
this.$route.params.id路由守卫
可以使用路由守卫控制页面访问权限：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})嵌套路由
对于复杂布局，可以使用嵌套路由：
const routes = [
{
path: '/user',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]过渡动画
为页面切换添加过渡效果：
<template>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>懒加载路由
优化性能，按需加载路由组件：
const About = () => import('../views/About.vue')命名视图
同一路由下展示多个视图：
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>配置：
{
path: '/',
components: {
default: Home,
header: Header,
footer: Footer
}
}
