本文主要介绍了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 { options.value = [] } } /** * 输入框填充内容触发该方法 * @param val 搜索框中输入的值 */ const change = (val) => { if (val) { router.push({ path: val, }) } options.value = [] search.value = '' isShowSearch.value = false } 三、雏形出现但有缺陷
经过不断探索，终于实现了一个全局菜单搜索框，但是这时我们会发现一个 bug：
这个问题是必须要输入完整的路由名称，路由才会在下拉框中展示，也就是说没有实现模糊查询功能，接下来针对这一问题进行解决。
四、优化搜索方式
路由搜索过程中没有实现模糊搜索的功能，接下来将借助 fusejs 实现这一功能。fuse.js 具体用法请参照 Fuse 官网。
初始化 fuse:
/** * fuse 实现模糊搜索 * @param list 需要进行模糊搜索的集合 */ const fuseInit = (list) => { fuse.value = new Fuse(list, { shouldSort: true, threshold: 0.4, location: 0, distance: 100, minMatchCharLength: 1, keys: [ { name: 'title', weight: 0.7, }, { name: 'path', weight: 0.3, }, ], }) } 另外，需要不断监听 searchPool，当 searchPool 改变时 调用 fuseInit 方法。
/** * 监听 searchPool */ watch(searchPool, (list) => { fuseInit(list) }) 添加了模糊搜索功能之后，全局菜单搜索框就基本实现，接下来看一下展示效果：
五、完整代码展示
结论
到此这篇关于Vue实现全局菜单搜索框的示例的文章就介绍到这了,更多相关Vue 全局菜单搜索框内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是Vue实现全局菜单搜索框的示例的详细内容，更多请关注0133技术站其它相关文章！
