全局搜索解决方案

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

原理：

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

---

这里需要借助第三方库：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)
}