当前位置：首页 > VUE

vue实现导航栏搜索

2026-02-23 19:34:23VUE

实现导航栏搜索功能

在Vue中实现导航栏搜索功能可以通过以下步骤完成。假设使用Vue 3和Composition API。

创建搜索组件

新建一个SearchBar.vue组件，包含输入框和搜索按钮：

<template>
  <div class="search-bar">
    <input 
      v-model="searchQuery"
      @keyup.enter="performSearch"
      placeholder="搜索..."
    />
    <button @click="performSearch">搜索</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const searchQuery = ref('')
const router = useRouter()

const performSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({ path: '/search', query: { q: searchQuery.value } })
  }
}
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 8px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

在导航栏中集成

将搜索组件添加到导航栏布局中：

<template>
  <nav>
    <!-- 其他导航项 -->
    <SearchBar />
  </nav>
</template>

<script setup>
import SearchBar from './SearchBar.vue'
</script>

处理搜索结果

创建搜索结果页面SearchResults.vue：

<template>
  <div>
    <h2>搜索结果: {{ searchTerm }}</h2>
    <!-- 显示搜索结果 -->
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div v-for="result in results" :key="result.id">
        {{ result.title }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const searchTerm = ref(route.query.q || '')
const results = ref([])
const loading = ref(false)

const fetchResults = async () => {
  loading.value = true
  try {
    // 替换为实际API调用
    const response = await fetch(`/api/search?q=${searchTerm.value}`)
    results.value = await response.json()
  } catch (error) {
    console.error('搜索出错:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (searchTerm.value) {
    fetchResults()
  }
})
</script>

路由配置

在路由配置中添加搜索路由：

import { createRouter, createWebHistory } from 'vue-router'
import SearchResults from './views/SearchResults.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 其他路由
    {
      path: '/search',
      component: SearchResults,
      props: (route) => ({ query: route.query.q })
    }
  ]
})

添加搜索状态管理

对于更复杂的应用，可以使用Pinia管理搜索状态：

// stores/search.js
import { defineStore } from 'pinia'

export const useSearchStore = defineStore('search', {
  state: () => ({
    query: '',
    results: [],
    loading: false
  }),
  actions: {
    async search(query) {
      this.query = query
      this.loading = true
      try {
        // 调用API
        const response = await fetch(`/api/search?q=${query}`)
        this.results = await response.json()
      } catch (error) {
        console.error('搜索出错:', error)
      } finally {
        this.loading = false
      }
    }
  }
})

实现实时搜索

要实现输入时实时搜索，可以添加防抖功能：

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash'

const searchQuery = ref('')

watch(searchQuery, debounce((newQuery) => {
  if (newQuery.trim()) {
    performSearch(newQuery)
  }
}, 500))
</script>

样式优化

为搜索栏添加更多样式提升用户体验：

.search-bar {
  position: relative;
  width: 300px;
}

.search-bar input {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
}

.search-bar button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
}

以上实现提供了导航栏搜索的基本功能，可以根据实际需求进行调整和扩展。

vue实现导航栏搜索