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>