当前位置：首页 > VUE

vue实现搜索跳转功能

2026-01-21 06:35:06VUE

Vue 实现搜索跳转功能的方法

使用 Vue Router 实现搜索跳转

在 Vue 项目中，可以通过 Vue Router 的 push 方法实现搜索跳转。创建一个搜索框，监听用户输入，触发路由跳转。

<template>
  <div>
    <input v-model="searchQuery" @keyup.enter="handleSearch" placeholder="输入搜索内容" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.$router.push({ path: '/search', query: { q: this.searchQuery } })
      }
    }
  }
}
</script>

在路由配置中定义搜索页

确保路由配置中包含搜索页的路由，以便接收搜索参数。

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: SearchPage,
    props: (route) => ({ query: route.query.q })
  }
]

在搜索页接收参数并处理

在搜索页组件中，通过 props 接收搜索参数，并进行后续处理（如调用 API 获取搜索结果）。

<template>
  <div>
    <h1>搜索结果: {{ query }}</h1>
  </div>
</template>

<script>
export default {
  props: ['query'],
  watch: {
    query(newVal) {
      this.fetchResults(newVal)
    }
  },
  methods: {
    fetchResults(query) {
      // 调用 API 获取搜索结果
      console.log('搜索关键词:', query)
    }
  }
}
</script>

使用 Vuex 管理搜索状态

如果需要全局管理搜索状态，可以使用 Vuex 存储搜索历史和当前搜索关键词。

const store = new Vuex.Store({
  state: {
    searchHistory: [],
    currentQuery: ''
  },
  mutations: {
    setCurrentQuery(state, query) {
      state.currentQuery = query
      state.searchHistory.push(query)
    }
  }
})

在组件中调用 Vuex

在搜索框组件中，提交 mutation 以更新搜索状态。

methods: {
  handleSearch() {
    if (this.searchQuery.trim()) {
      this.$store.commit('setCurrentQuery', this.searchQuery)
      this.$router.push({ path: '/search', query: { q: this.searchQuery } })
    }
  }
}

优化搜索体验

可以通过防抖（debounce）减少频繁搜索请求，提升性能。

vue实现搜索跳转功能

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    if (this.searchQuery.trim()) {
      this.$router.push({ path: '/search', query: { q: this.searchQuery } })
    }
  }, 500)
}

以上方法可以根据实际需求组合使用，灵活实现 Vue 中的搜索跳转功能。