Vue,单页面下，自定义组件传递值给router-view,只有第一次跳转时有效。该如何解决

Question

问题不太好描述，我图文一起加上，详细描述下问题

这个是router的配置关系

这个是首页

比如我现在再首页，要进行搜索功能

按下回车后跳转到搜索结果页面（首页跳转到搜索结果页没问题）

然后问题来了，如果我在这个搜索页面更改搜索的关键字，然后点击搜索按钮，结果如下

这个时候页面没有任何变化，跳转代码如下

如图，如果我在搜索结果页面更改搜索的关键字后，再点击搜索按钮，搜索结果页面，也就是首页中<router-view>，不会有任何响应，也就无法根据更改后的关键字重新发送搜索请求，这个问题该如何解决

对了，以下是搜索结果页面的请求方式（vuex好像也不能解决这个问题，主要是搜索结果页面web_searchInfo没有任何的变化，各生命周期都不会重新执行，所以即便vuex值变了也没用）

注：如图上，有新建窗口的方法可以解决（其实也不叫解决额），但我不喜欢重新搜索都要新建页面，这样就显得太臃肿（指窗口多了）,有没有哪位大佬知道其他的解决方法，求指点

Answer 1

根据大家提供的方法和自己的实践，总结一下最后的结果
我在web_searchInfo(即搜索结果页面)，采用 beforeRouteUpdate 的 方法

  beforeRouteUpdate(to,from,next){
    //在当前路由改变，但是该组件被复用时调用
    //对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteUpdate Update Update'); //当前组件实例
    next();
    this.getSearchInfo();
  },

这里getSearchInfo是封装好了请求结果的方法，该方法，vue官网，vue-router中有讲，附上文档地址
https://router.vuejs.org/zh/g...

另外感谢几位其他大佬提供的watch解决方案，目前处于学习阶段，本次尚未使用的watch方法，会在以后尝试使用，如果其他人有类似问题，也可尝试使用，最后谢谢各位大佬提供帮助

还有忘记补充了，getSearchInfo()中，封装的api方法和参数获取如下（其实就用route获取就可以）

 const result = await this.$apis.ArticleApi.get_search(this.$route.params.key_word,this.search_page,this.searchType);

Answer 2

在搜索页面，使用beforeRouteUpdate()搜索，另外search_key不需要存到vuex,点击button是，router.push(params:key)，在搜索页面beforerouteenter()用to.params.key获取到keyword

Answer 3

watch路由，再次执行获取数据的方法

Answer 4

因为你 search 组件已经在第一次搜索中处于激活状态了，重发路由是不会引发组件重载的，这是为了渲染性能的考虑，对于搜索结果的查询和页面的展示应该去监听这个参数的变化去发起请求，而不是把重点放在页面的重载上。比如按照你的参数在结果展示的视图中监听this.$route.params.key_word：

watch: {
  '$route.params.key_word' (value, oldValue) {
    // 查询请求
    search(value)
  }
}

另外对于vuex来说，如果你的搜索组件需要跨页面保存搜索状态，可以用它来实现，它是管理全局的状态，比如你在搜索框里输入了一个关键字，然后给他一个dispatch的操作去修改储存在全局中的关键字变量，在查询请求所在的页面中监听这个值的变化，去触发搜索请求。具体来说是这样的：（假设vuex里state对象储存了一个叫keyword的变量，然后也定义好了相应的mutations和actions）

// 搜索组件中的搜索框：
<input v-model="keyword" @change="updateKeyword" />

// 搜索组件中更新全局状态
updateKeyword () {
  this.$store.dispatch('DISPATCH_KEYWORD', this.keyword)
}

// 搜索结果视图中监听变量
watch: {
  '$store.state.keyword' (value) {
    search(value)
  }
}

以上是举个例子说明这种逻辑，具体实现可以根据自己的需求来。