vue实现搜索跳转功能
Vue 实现搜索跳转功能
基本路由配置
在 Vue 项目中，使用 Vue Router 配置路由是实现搜索跳转的基础。确保已安装并配置 Vue Router。以下是一个简单的路由配置示例：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import SearchResults from '@/views/SearchResults.vue';
const routes = [
{
path: '/search',
name: 'SearchResults',
component: SearchResults,
props: route => ({ query: route.query.q })
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;搜索表单组件
创建一个搜索表单组件，用于接收用户输入并触发跳转。通过 v-model 绑定输入框的值，使用 router.push 实现跳转。
<!-- components/SearchForm.vue -->
<template>
<form @submit.prevent="handleSearch">
<input v-model="searchQuery" placeholder="输入关键词..." />
<button type="submit">搜索</button>
</form>
</template>
<script>
export default {
data() {
return {
searchQuery: ''
};
},
methods: {
handleSearch() {
this.$router.push({ path: '/search', query: { q: this.searchQuery } });
}
}
};
</script>搜索结果页面
在搜索结果页面中，通过路由的 query 参数获取搜索关键词，并展示相关内容。可以使用 watch 监听路由变化以实现动态更新。
<!-- views/SearchResults.vue -->
<template>
<div>
<h2>搜索结果: {{ searchTerm }}</h2>
<!-- 展示搜索结果 -->
</div>
</template>
<script>
export default {
props: ['query'],
computed: {
searchTerm() {
return this.query || '';
}
},
watch: {
query(newVal) {
// 根据新关键词重新加载数据
this.loadResults(newVal);
}
},
methods: {
loadResults(query) {
// 调用 API 或过滤本地数据
console.log('加载关键词:', query);
}
}
};
</script>动态加载数据
根据搜索关键词动态加载数据。可以使用 axios 或其他 HTTP 客户端从后端 API 获取数据。
// 在 SearchResults.vue 的 methods 中
async loadResults(query) {
if (!query) return;
try {
const response = await axios.get('/api/search', { params: { q: query } });
this.results = response.data;
} catch (error) {
console.error('搜索失败:', error);
}
}直接通过 URL 跳转
支持用户直接通过 URL 访问搜索结果页面，例如 /search?q=vue。确保在页面加载时触发数据加载逻辑。
// 在 SearchResults.vue 的 created 钩子中
created() {
this.loadResults(this.searchTerm);
}优化用户体验
添加加载状态和错误处理，提升用户体验。在数据加载时显示加载动画，出错时展示友好提示。
<template>
<div>
<h2>搜索结果: {{ searchTerm }}</h2>
<div v-if="loading">加载中...</div>
<div v-if="error">{{ errorMessage }}</div>
<div v-else>
<!-- 展示搜索结果 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
error: false,
errorMessage: ''
};
},
methods: {
async loadResults(query) {
if (!query) return;
this.loading = true;
this.error = false;
try {
const response = await axios.get('/api/search', { params: { q: query } });
this.results = response.data;
} catch (error) {
this.error = true;
this.errorMessage = '搜索失败，请重试';
} finally {
this.loading = false;
}
}
}
};
</script>本地搜索实现
如果数据量较小，可以在前端直接过滤数据，避免频繁请求后端。
// 在 SearchResults.vue 中
methods: {
filterLocalData(query) {
return this.allData.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
}
}防抖优化
为避免频繁触发搜索请求，可以使用防抖函数（如 lodash.debounce）延迟执行搜索逻辑。
import { debounce } from 'lodash';
methods: {
loadResults: debounce(function(query) {
// 实际加载逻辑
}, 500)
}
