hookehuyr

fix(课程列表页): 修复路由参数变化时搜索未触发的问题

移除对相同关键字的拦截逻辑,确保路由参数变化时能触发搜索。改用精确监听路由参数并设置立即执行,解决进入页面时搜索未触发的问题。
......@@ -58,3 +58,8 @@ https://oa-dev.onwall.cn/f/mlaj
- 课程页(`isCoursePage=true`):回车或搜索键触发后跳转至 `/courses-list` 并携带 `keyword` 参数。
- 列表页:仅更新当前路由的查询参数 `keyword`
- 位置:`/src/components/ui/SearchBar.vue`,新增 `useFormSubmit` 可选参数(默认开启)。
- 课程列表页搜索触发修复
- 现象:进入列表页后,输入关键字并更新为 `/courses-list?keyword=xxx` 时未触发搜索。
- 原因:父组件 `handleSearch` 对“相同关键字”进行了拦截,导致路由参数变化不执行请求。
- 修复:移除拦截逻辑;无论关键字是否变化均触发搜索(防抖控制频率)。
- 位置:`/src/views/courses/CourseListPage.vue``handleSearch`
......
<!--
* @Date: 2025-03-21 14:31:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-05-21 16:57:36
* @LastEditTime: 2025-12-08 11:31:57
* @FilePath: /mlaj/src/views/courses/CourseListPage.vue
* @Description: 文件描述
-->
......@@ -30,7 +30,7 @@
</template>
<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue';
import SearchBar from '@/components/ui/SearchBar.vue';
......@@ -60,20 +60,33 @@ const debouncedSearch = useDebounceFn(async (searchKeyword) => {
}, 300);
// 统一处理搜索操作
/**
* @function handleSearch
* @description 统一触发搜索;即使关键字相同也重新搜索,确保从URL跳转和失焦行为都能触发。
* @param {string} newKeyword 新关键字
* @returns {void}
*/
const handleSearch = (newKeyword) => {
if (keyword.value !== newKeyword) {
keyword.value = newKeyword;
debouncedSearch(newKeyword);
}
};
// 监听路由参数变化
watchEffect(() => {
const queryKeyword = $route.query.keyword;
if (queryKeyword !== undefined) {
handleSearch(queryKeyword || '');
}
});
// 精确监听路由查询参数 keyword 的变化
/**
* @function watch_route_keyword
* @description 精确监听 `$route.query.keyword` 的变化并触发搜索;
* `immediate: true` 保证进入页面时若已有关键字能立刻执行搜索。
* @returns {void}
*/
watch(
() => $route.query.keyword,
(queryKeyword) => {
if (queryKeyword !== undefined) {
handleSearch(queryKeyword || '');
}
},
{ immediate: true }
);
// Blur handler
const handleBlur = (query) => {
......