Vue 移动端实战六文章搜索关键字高亮的技巧、本地数据的储存和调用、防抖插件的调用

本文详细介绍了在Vue移动端项目中实现文章搜索功能的全过程，包括创建搜索组件、页面布局、处理显示状态、搜索联想建议、关键字高亮、搜索结果展示、搜索历史记录的添加、展示和删除，以及数据持久化。同时，文章还讨论了防抖优化技术，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章搜索

1.0 创建组件并配置路由

1、创建 src/views/search/index.vue

<template>
  <div class="search-container">搜索页面</div>
</template>

<script>
  export default {
   
   
    name: "SearchPage",
    components: {
   
   },
    props: {
   
   },
    data() {
   
   
      return {
   
   };
    },
    computed: {
   
   },
    watch: {
   
   },
    created() {
   
   },
    methods: {
   
   }
  };
</script>

<style scoped></style>

2、然后把搜索页面的路由配置到根组件路由（一级路由）

{
   
   
    path: '/search',
    name: 'search',
    component: () =>
        import ('@/views/search')
}

2.0 页面布局

1、创建 src/views/search/components/search-history.vue

<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <span>全部删除</span>
      <span>完成</span>
      <van-icon name="delete" />
    </van-cell>
    <van-cell title="hello">
      <van-icon name="close" />
    </van-cell>
    <van-cell title="hello">
      <van-icon name="close" />
    </van-cell>
    <van-cell title="hello">
      <van-icon name="close" />
    </van-cell>
    <van-cell title="hello">
      <van-icon name="close" />
    </van-cell>
  </div>
</template>

<script>
export default {
   
   
  name: 'SearchHistory',
  components: {
   
   },
  props: {
   
   },
  data () {
   
   
    return {
   
   }
  },
  computed: {
   
   },
  watch: {
   
   },
  created () {
   
   },
  mounted () {
   
   },
  methods: {
   
   }
}
</script>

<style scoped lang="less"></style>

2、创建 src/views/search/components/search-suggestion.vue

<template>
  <div class="search-suggestion">
    <van-cell title="黑马程序员..." icon="search"></van-cell>
    <van-cell title="黑马程序员..." icon="search"></van-cell>
    <van-cell title="黑马程序员..." icon="search"></van-cell>
    <van-cell title="黑马程序员..." icon="search"></van-cell>
    <van-cell title="黑马程序员..." icon="search"></van-cell>
  </div>
</template>

<script>
export default {
   
   
  name: 'SearchSuggestion',
  components: {
   
   },
  props: {
   
   },
  data () {
   
   
    return {
   
   }
  },
  computed: {
   
   },
  watch: {
   
   },
  created () {
   
   },
  mounted () {