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 适合多页面应用，动态组件适合简单页面切换，状态管理适合复杂状态共享的场景。