1.导航栏有个搜索功能，点击搜索是路由跳转到课程列表这个页面，

 

 2. 搜索关键字课程，路由跳转到openClass页面，并且携带query参数  search

<div class="inputStyle" style="width: 280px;"><el-input v-model="inputValue" placeholder=""></el-input><div class="searchBtn" @click="toSearch()"><label for=""><img src="../../../static/images/search-icon.png"style="width: 15px; height: 15px; vertical-align: text-bottom" alt="" /></label><span>搜索</span></div></div>
toSearch() {this.$router.push({name: "openClass",query: {search: this.inputValue,},});},

3.公开课页面监听 $route 才能每点一次搜索都能重新 调用后台接口 根据关键词查询数据

不监听$route ，只在mouted里面 接收query参数，在调用this.getList() 导航栏只能搜索一次。搜索第二次公开课不会调用方法. 大家可以试一下

 

 watch:{'$route': {handler(val) {if (val) {let search = val.query.search || '';this.name = search;this.getList() //调用后台接口 获取数据}console.log(val,2222222222);},deep: true}},