搜索+防抖
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),