vue实现多个页面转化
Vue 实现多页面转换的方法
使用 Vue Router 实现单页应用 (SPA) 路由切换
在 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在组件中使用 <router-link> 进行导航，<router-view> 作为路由出口显示匹配的组件。
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>配置多页面应用 (MPA) 的多个入口
如果需要构建真正的多页面应用（每个页面有独立的 HTML 文件），可以通过修改 Vue CLI 或 Vite 配置实现。
在 vue.config.js 中配置多个页面入口：
// vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
about: {
entry: 'src/about/main.js',
template: 'public/about.html',
filename: 'about.html'
}
}
}每个页面需要独立的入口文件（如 src/about/main.js）和模板文件（如 public/about.html）。
动态路由与参数传递
Vue Router 支持动态路由匹配，可以通过参数实现页面间的数据传递。
// 路由配置
{ path: '/user/:id', component: User }在组件中访问路由参数：
this.$route.params.id使用 <router-link> 传递参数：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>路由导航守卫控制页面跳转
通过导航守卫可以在路由切换前后执行逻辑，如权限验证、页面跳转取消等。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})页面过渡动画效果
使用 Vue 的过渡系统为路由切换添加动画效果。
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>添加 CSS 过渡样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}嵌套路由实现复杂布局
对于有嵌套布局的页面，可以使用嵌套路由配置。
{
path: '/settings',
component: SettingsLayout,
children: [
{ path: 'profile', component: Profile },
{ path: 'account', component: Account }
]
}在父组件中放置 <router-view> 作为子路由出口。
编程式导航控制页面跳转
除了 <router-link>，还可以通过代码实现页面跳转。
// 字符串路径
router.push('/about')
// 带参数
router.push({ path: '/user', query: { id: '123' } })
// 替换当前路由
router.replace({ path: '/home' })路由懒加载优化性能
对于大型应用，可以使用懒加载拆分代码块，按需加载路由组件。
const About = () => import('./views/About.vue')保持页面状态
默认情况下，Vue Router 会在路由切换时销毁并重建组件。使用 <keep-alive> 可以缓存组件状态。
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
