vue pc端端平台 实现 搜索跳转+搜索结果刷新

1、因为要实现路由带参跳转

所以自router.js 里的搜索路由要写成

  {    path: "/search",    name: "search",    component:()=>import("../views/Searchr.vue"),    props: (route) => ({ query: route.query.word })  },

2、然后在需要实现搜索功能的页面，需写

   <div class="serchBox">          <div>            <input type="text" placeholder="搜索" v-on:keyup.enter="goSearch" v-model="value" />            <span @click="goSearch"></span>          </div>        </div>

<script>
export default {  data() {
return{}
     },
methoud:{
 goSearch() {           this.$router.push("/search?word=" + this.value);          },

}     }
  </script>

3、在跳转的结果页写

<template>  <div class="businessPage">    <div class="Layout">      <div class="word">内容搜索“{{this.$attrs.query}}”结果</div>      <div class="serResult" v-if="serResult.length !=0">        <ul>          <li v-for="(item,i) in serResult" :key="i">{{item.title}}</li>        </ul>      </div>      <div class="serResult" v-else>        <ul>          <li>未查询到“{{this.$attrs.query}}”的相关信息</li>        </ul>      </div>    </div>  </div></template>

<script>import { newssearch } from "./api/api";//搜索接口apiexport default {  data() {    return {      serResult: [],    };  },  created(){    this.gecount(this.$attrs.query)  },  methods:{   gecount(content){      let data={        content:content      };      newssearch(data).then(res=>{        this.serResult=res.list      })   },  },
//通过监视route变化，实现搜索结果部分页面及时更新渲染  watch :{  　'$route': function (to, from) {       this.gecount(to.query.word)　　}},};</script>