课程名称：基于Vue3最新标准，实现后台前端综合解
课程章节： 第一章
课程讲师：Sunday
课程内容
我们希望被检索的页面其实就是左侧菜单中的页面，那么我们检索数据源即为：左侧菜单对应的数据源
const router = useRouter()
const searchPool = computed(() => {
const filterRoutes = filterRouters(router.getRoutes())
console.log(generateMenus(filterRoutes))
return generateMenus(filterRoutes)
})手写router 获取 所有得路由json 通过filterRouters 将获取到得数据 处理成 最终想要得数据
/**
* 处理脱离层级的路由：某个一级路由为其他子路由，则剔除该一级路由，保留路由层级
* @param {*} routes router.getRoutes()
*/
export const filterRouters = routes => {
const childrenRoutes = getChildrenRoutes(routes)
return routes.filter(route => {
return !childrenRoutes.find(childrenRoute => {
return childrenRoute.path === route.path
})
})
}
// 处理后得样子
[
{
"path":"/my",
"title":[
"个人中心"
]
},
{
"path":"/user",
"title":[
"用户"
]
},
]处理模糊搜索 时 需要用到 fuse.js 通过npm 进行安装
将上面处理过的数据 放入 list 中
import Fuse from 'fuse.js'/**
* 搜索库相关
*/const fuse = new Fuse(list, {
// 是否按优先级进行排序
shouldSort: true,
// 匹配长度超过这个值的才会被认为是匹配的
minMatchCharLength: 1,
// 将被搜索的键列表。 这支持嵌套路径、加权搜索、在字符串和对象数组中搜索。
// name：搜索的键
// weight：对应的权重
keys: [
{
name: 'title',
weight: 0.7
},
{
name: 'path',
weight: 0.3
}
]
})引入以上内容 进行初始化
创建一个 FuseData.js
import path from 'path'
import i18n from '@/i18n'/**
* 筛选出可供搜索的路由对象
* @param routes 路由表
* @param basePath 基础路径，默认为 /
* @param prefixTitle
*/
export const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
// 创建 result 数据
let res = []
// 循环 routes 路由
for (const route of routes) {
// 创建包含 path 和 title 的 item
const data = {
path: path.resolve(basePath, route.path),
title: [...prefixTitle]
}
// 当前存在 meta 时，使用 i18n 解析国际化数据，组合成新的 title 内容
// 动态路由不允许被搜索
// 匹配动态路由的正则
const re = /.*\/:.*/
if (route.meta && route.meta.title && !re.exec(route.path)) {
const i18ntitle = i18n.global.t(`msg.route.${route.meta.title}`)
data.title = [...data.title, i18ntitle]
res.push(data)
}
// 存在 children 时，迭代调用
if (route.children) {
const tempRoutes = generateRoutes(route.children, data.path, data.title)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
}
return res}需要在使用页面引入 并调用 generateRoutes 方法
// 搜索方法
const querySearch = query => {
console.log(fuse.search(query))
}此时 搜索框方法 调用fuse 这时就能返回拉