搜索+防抖

搜索+防抖

1.以每时每刻这个项目为例,很多页面都有搜索功能,而且跳转的时同一个搜索页面,在完成搜索功能后,在返回原页面,需要一个唯一标识来记载

// 搜索
goSearch() {
    this.$router.push({
     path: "/search",
     query: { name: this.$route.name }});
    //通过query传参,把每个页面的$route.name传递过去,因为在注册路由的时候,每个路由的name值都是唯一的
}

//路由注册表
 [ {
    path: '/exam',
    name: 'exam',//路由name值
    component: exam,
    meta: {
      title: '仿真模考'
    }
  },
   {
    path: '/paperPackage',
    name: 'paperPackage',//路由name值
    component: paperPackage,
    meta: {
      title: '套卷练习'
    }
  },
 ]

2.在搜索页面接受

created() {
    this.name = this.$route.query.name;//接受传递过来的name值,并且保存
},

3.点击搜索按钮触发事件

 let arr = ["exam","paperPackage"];//将项目中需要跳转搜索页的路由name放在一个数组里
      arr.forEach(value => {//遍历数组
        if (value == this.name) {//如果遍历查询到,返回跳转页
          this.$router.push({
            name: value,
            params: { keywords: this.keywords }//通过params传参将关键字带回
          });
        }
 });

4.在数据页面接受关键字

 created() {
    this.keywords = this.$route.params.keywords;//接收keywords关键字
},

5.然后在执行数据请求,携带关键字

mounted() {
	//调用请求数据的函数getData()
},

6.防抖的简单实现

//npm i --save lodash
//在组件内部引入import lodash from "lodash";
// <input type="text" placeholder="请输入内容" v-model="keywords" @input="keyInput" /> 标签绑定input事件
   keyInput: _.debounce(function() {
        this.getData(); //获取数据
  }, 2000),