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)
}