全局搜索解决方案

需求：用户通过搜索框进行全局搜索，与当前系统路由进行匹配，用户点击匹配结果，可以跳转到该路径下的页面。

原理：

• 根据用户输入内容在数据源中进行 模糊搜索
• 获取数据源
• 根据匹配结果，将其渲染到下拉框组件中
• 点击下拉框选项，跳转到其他页面

---

这里需要借助第三方库：fuse.js

import Fuse from "fuse.js";
let searchList = ref([
  {
    path: "/profile",
    title: ["个人中心"],
  },
  {
    path: "/user/role",
    title: ["用户", "角色列表"],
  },
]);
fuse = new Fuse(searchList.value, {
  // 是否按优先级进行排序
  shouldSort: true,
  // 匹配长度超过这个值的才会被认为是匹配的
  minMatchCharLength: 1,
  // name: 搜索的键
  // weight 对应权重
  keys: [
    {
      name: "title",
      weight: 0.7,
    },
    {
      name: "path",
      weight: "0.3",
    },
  ],
});

// 执行搜索
const search = (key) => {
  let res = fuse.search(key);
};