Vue 项目如何实现一个全局菜单搜索框

最新推荐文章于 2025-10-11 17:41:52 发布

原创

最新推荐文章于 2025-10-11 17:41:52 发布 · 7.2k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #typescript

文章介绍了如何在Vue项目中实现全局菜单搜索功能，包括过滤隐藏路由和具有title属性的路由，利用el-select组件和fuse.js实现搜索框的模糊搜索功能，以及处理搜索结果的显示和路由跳转。最后展示了完整代码并提供了优化搜索方式的思路。

✨ 个人主页：山山而川~xyj
⚶ 作者简介：前端领域新星创作者，专注于前端各领域技术，共同学习共同进步，一起加油！
🎆 系列专栏： Vue 系列
🚀 学习格言：与其临渊羡鱼，不如退而结网

前言

本篇文章分享一下我在实际开发 Vue 项目时遇到的需要 —— 全局菜单搜索。全局菜单搜索本质是 router 的使用，该功能已经实现，接下来分享一下开发心得。

一、过滤路由

首先需要过滤出符合条件的路由信息，过滤的条件包含两个：

路由可以显示出现（hidden: false）
路由元信息中包含 title 属性
代码展示：

  /**
   * 筛选出可以在侧边栏显示的路由
   * @param routes 路由
   * @param basePath 路径
   * @param prefixTitle 标题
   */
  const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
   
   
    let filterRoutes = []

    for (const route of routes) {
   
   
      // 如果路由已经隐藏，跳过这次
      if (route.hidden) {
   
   
        continue
      }

      const data = {
   
   
        path: path.resolve(basePath, route.path),
        title: [...prefixTitle],
      }

      // 仅推送有标题的路由
      if (route.meta && route.meta.title) {
   
   
        data.title = [...data.title, route.meta.title]

        if (route.redirect !== 'noReDirect') {
   
   
          filterRoutes.push(data)
        }
      }

      // 循环子路由
      if (route.children) {
   
   
        const childRoutes = generateRoutes(route.children, data.path, data.title)
        if (childRoutes.length >= 1) {
   
   
          filterRoutes = [...filterRoutes, ...childRoutes]
        }
      }
    }
    return filterRoutes
  }

注意：如果路由包含子路由，就要递归调用 generateRoutes 方法，在递归结束之后把符合条件的路由赋值给 filterRoutes，之后将其返回。

二、搜索框展示路由

实现搜索框使用的是 el-select 组件，在刚进入页面时需要在 onMounted 声明周期中调用 generateRoutes 方法，将其赋值给变量 searchPool。

  onMounted(() => {
   
   
    searchPool.value = generateRoutes(JSON.parse(JSON.stringify(authRoute)))
  })

接下来，需要定义 el-select 组件的 远程搜索方法 和 change 事件。其中远程搜索方法 query 作用是把符合搜索结果的信息筛选出来赋值给 options，之后通过下拉选项展示这些信息。而 change 事件是当选中路由时实现路由的跳转并完成一些变量的初始化。

  // 搜索框的远程搜索方法
  const query = (queryVal) => {
   
   
    if (queryVal !== '') {
   
   
      options.value = fuse.value.search(queryVal)
    } else {
   
   
      optio