vue实现菜单页面切换
Vue实现菜单页面切换的方法
使用Vue Router进行路由切换
Vue Router是Vue.js官方的路由管理器，适合实现单页应用中的页面切换。
安装Vue Router：
npm install vue-router配置路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
export default router在App.vue中使用：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>动态组件切换
使用Vue的component组件和v-if指令可以实现简单的页面切换。
<template>
<div>
<button @click="currentComponent = 'Home'">Home</button>
<button @click="currentComponent = 'About'">About</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
export default {
components: { Home, About },
data() {
return {
currentComponent: 'Home'
}
}
}
</script>使用状态管理切换
在大型应用中，可以使用Vuex管理页面状态。
安装Vuex：
npm install vuex配置store：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentPage: 'Home'
},
mutations: {
setCurrentPage(state, page) {
state.currentPage = page
}
}
})组件中使用：
<template>
<div>
<button @click="goToPage('Home')">Home</button>
<button @click="goToPage('About')">About</button>
<component :is="currentPage"></component>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import Home from './components/Home.vue'
import About from './components/About.vue'
export default {
components: { Home, About },
computed: {
...mapState(['currentPage'])
},
methods: {
...mapMutations(['setCurrentPage']),
goToPage(page) {
this.setCurrentPage(page)
}
}
}
</script>动画过渡效果
为页面切换添加动画效果可以提升用户体验。
<template>
<div>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>嵌套路由实现复杂菜单
对于多级菜单，可以使用嵌套路由。
路由配置：
const routes = [
{
path: '/user',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'settings',
component: UserSettings
}
]
}
]菜单结构：
<router-link to="/user/profile">Profile</router-link>
<router-link to="/user/settings">Settings</router-link>
<router-view></router-view>
