vue实现页面切换
实现页面切换的基本方法
在Vue中实现页面切换通常涉及路由配置和组件切换。Vue Router是官方推荐的路由管理库，适用于单页面应用（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: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在Vue应用中使用路由
在主入口文件（main.js）中引入并挂载路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在应用模板中使用<router-view>作为页面容器：
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>动态路由和参数传递
实现带参数的路由跳转：
// router/index.js
const routes = [
{ path: '/user/:id', component: User }
]在组件中进行导航：
// 编程式导航
this.$router.push('/user/123')
// 或使用对象形式
this.$router.push({ path: '/user', query: { id: 123 } })在目标组件中获取参数：
// User.vue
export default {
computed: {
userId() {
return this.$route.params.id
}
}
}路由过渡效果
为页面切换添加动画效果：
<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.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>路由守卫控制
实现导航守卫控制页面访问权限：
// router/index.js
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})嵌套路由配置
设置嵌套路由实现复杂布局：
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'profile', component: Profile },
{ path: 'settings', component: Settings }
]
}
]在父组件中放置嵌套视图：
<!-- Dashboard.vue -->
<template>
<div>
<h1>Dashboard</h1>
<router-view />
</div>
</template>
