当前位置：首页 > VUE

vue实现菜单路由

2026-01-18 11:30:47VUE

Vue 实现菜单路由的方法

在 Vue 中实现菜单路由通常需要结合 Vue Router 和动态路由配置。以下是几种常见的方法：

使用 Vue Router 配置路由

安装 Vue Router：

npm install vue-router

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

动态生成菜单

在组件中动态生成菜单，通常结合 v-for 和 router-link：

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/', name: 'Home' },
        { path: '/about', name: 'About' }
      ]
    }
  }
}
</script>

嵌套路由实现多级菜单

在路由配置中嵌套子路由：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

在模板中使用嵌套路由：

<template>
  <div>
    <router-link to="/dashboard/profile">Profile</router-link>
    <router-link to="/dashboard/settings">Settings</router-link>
    <router-view></router-view>
  </div>
</template>

权限控制与动态路由

根据用户权限动态生成路由：

// 过滤有权限的路由
const filteredRoutes = allRoutes.filter(route => {
  return userPermissions.includes(route.meta.permission)
})

// 动态添加路由
router.addRoute(filteredRoutes)

在菜单组件中根据权限过滤显示：

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

<script>
export default {
  computed: {
    allowedMenuItems() {
      return this.menuItems.filter(item => {
        return this.$store.state.user.permissions.includes(item.meta.permission)
      })
    }
  }
}
</script>

使用路由元信息控制菜单显示

在路由配置中添加元信息：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      menuName: 'Admin Panel'
    }
  }
]

在导航守卫中检查权限：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

保持菜单状态

使用 Vuex 或 Pinia 存储当前激活的菜单项：

// store/modules/menu.js
export default {
  state: {
    activeMenu: '/'
  },
  mutations: {
    setActiveMenu(state, path) {
      state.activeMenu = path
    }
  }
}

在组件中更新状态：

<template>
  <div 
    v-for="item in menuItems" 
    :key="item.path"
    :class="{ active: $store.state.menu.activeMenu === item.path }"
    @click="$store.commit('setActiveMenu', item.path)"
  >
    {{ item.name }}
  </div>
</template>

以上方法可以根据项目需求组合使用，实现灵活的路由菜单系统。

vue实现菜单路由