Vue.js搜索功能查询参数更新后结果未同步刷新问题咨询

问题原因 #

• searchResult组件的搜索请求仅在created生命周期钩子中执行，该钩子只会在组件首次初始化时触发1次。当你在已进入/search路由的情况下修改搜索参数，由于路由对应的组件没有被销毁重建，created钩子不会重复执行，不会发起新的搜索请求。
• 你虽然在searchResult组件中监听了$route.query.search的变化，同步更新了组件内的search变量，但没有监听search变量的变化触发新的接口请求，仅更新变量不会自动拉取新的搜索结果。
• navbar组件中定义的getArticles方法，请求结果存储在navbar自身的articles状态中，和searchResult组件的articles是完全隔离的两个独立状态，navbar的请求结果无法同步到结果页。

修复方案 #

方案一（推荐，性能最优） #

修改searchResult组件逻辑，把请求逻辑抽为公共方法，新增对search变量的监听，变化时自动触发请求：

export default {
  data() {
    return {
      articles: [],
      article: {},
      search: ''
    }
  },
  created() {
    // 组件初始化时触发一次请求
    this.fetchArticles()
  },
  watch: {
    '$route.query.search': {
      immediate: true,
      handler(value) {
        this.search = value
      }
    },
    // 新增监听search变化，自动触发请求
    search() {
      this.fetchArticles()
    }
  },
  methods: {
    // 把请求逻辑抽成公共方法
    fetchArticles() {
      // 空搜索词可加判断，避免无效请求
      if (!this.search) return
      const url = `${baseApiUrl}/search?search=${this.search}`;
      axios(url).then((res) => {
        this.articles = res.data;
      });
    }
  }
};

同时删除navbar组件中无用的getArticles方法和enter键绑定的触发逻辑，搜索请求统一交给searchResult组件处理即可，避免重复发起无效请求。

方案二（轻量修改，性能稍弱） #

如果不想改组件逻辑，也可以在Content组件内的router-view上添加key属性，值设为$route.fullPath，这样路由参数变化时会强制销毁重建组件，created钩子会重新执行，也能解决问题：

<router-view :key="$route.fullPath" />

内容的提问来源于stack exchange，提问作者guilherme augusto