vue 实现页面内菜单

Vue 实现页面内菜单的方法

使用 Vue Router 实现导航菜单

在 Vue 项目中，可以通过 Vue Router 实现页面内的导航菜单。Vue Router 提供了路由配置和导航功能，适合单页面应用（SPA）的菜单实现。

安装 Vue Router：

npm install vue-router

配置路由：

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>
  <router-view></router-view>
</template>

使用动态菜单数据

对于动态生成的菜单，可以通过数据驱动的方式实现。将菜单数据存储在组件的 data 或通过 API 获取。

定义菜单数据：

data() {
  return {
    menuItems: [
      { name: 'Home', path: '/' },
      { name: 'About', path: '/about' }
    ]
  };
}

渲染动态菜单：

<template>
  <nav>
    <router-link v-for="item in menuItems" :key="item.path" :to="item.path">
      {{ item.name }}
    </router-link>
  </nav>
</template>

实现嵌套菜单

对于多级菜单，可以通过递归组件或嵌套路由实现。

嵌套路由配置：

const routes = [
  {
    path: '/products',
    component: Products,
    children: [
      { path: 'list', component: ProductList },
      { path: 'detail/:id', component: ProductDetail }
    ]
  }
];

渲染嵌套菜单：

<template>
  <div v-for="item in menuItems" :key="item.path">
    <router-link v-if="!item.children" :to="item.path">
      {{ item.name }}
    </router-link>
    <div v-else>
      <span>{{ item.name }}</span>
      <router-link 
        v-for="child in item.children" 
        :key="child.path" 
        :to="child.path"
      >
        {{ child.name }}
      </router-link>
    </div>
  </div>
</template>

添加菜单交互效果

可以通过 Vue 的过渡和动画功能为菜单添加交互效果。

使用过渡效果：

<template>
  <transition name="fade">
    <nav v-show="isMenuOpen">
      <!-- 菜单内容 -->
    </nav>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

响应式菜单实现

针对移动端设备，可以通过媒体查询和 Vue 的状态管理实现响应式菜单。

响应式菜单逻辑：

<template>
  <button @click="toggleMenu">Toggle Menu</button>
  <nav :class="{ 'mobile-menu': isMobile }" v-show="isMenuOpen">
    <!-- 菜单内容 -->
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      isMenuOpen: false
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
};
</script>

<style>
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: white;
}
</style>

以上方法可以根据项目需求灵活组合使用，实现功能完善且用户体验良好的页面内菜单。