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在菜单组件中使用 <router-link> 实现导航：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>动态组件切换
使用 Vue 的 <component> 和 v-bind:is 实现动态组件切换：
<template>
<div>
<button @click="currentComponent = 'Home'">Home</button>
<button @click="currentComponent = 'About'">About</button>
<component :is="currentComponent" />
</div>
</template>
<script>
import Home from './Home.vue'
import About from './About.vue'
export default {
components: { Home, About },
data() {
return {
currentComponent: 'Home'
}
}
}
</script>条件渲染实现切换
使用 v-if 或 v-show 根据条件显示不同页面：
<template>
<div>
<button @click="showHome = true; showAbout = false">Home</button>
<button @click="showHome = false; showAbout = true">About</button>
<Home v-if="showHome" />
<About v-if="showAbout" />
</div>
</template>
<script>
import Home from './Home.vue'
import About from './About.vue'
export default {
components: { Home, About },
data() {
return {
showHome: true,
showAbout: false
}
}
}
</script>使用状态管理
对于复杂应用，可以使用 Pinia 或 Vuex 管理页面状态：
// store.js
import { defineStore } from 'pinia'
export const usePageStore = defineStore('page', {
state: () => ({
currentPage: 'Home'
}),
actions: {
setPage(page) {
this.currentPage = page
}
}
})在组件中使用：
<template>
<div>
<button @click="setPage('Home')">Home</button>
<button @click="setPage('About')">About</button>
<component :is="currentPage" />
</div>
</template>
<script>
import { usePageStore } from './store'
import { mapState, mapActions } from 'pinia'
export default {
computed: {
...mapState(usePageStore, ['currentPage'])
},
methods: {
...mapActions(usePageStore, ['setPage'])
}
}
</script>动画过渡效果
为页面切换添加过渡动画：
<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>以上方法可根据项目需求选择使用，Vue Router 适合多页面应用，动态组件适合简单页面切换，状态管理适合复杂状态共享的场景。
