在同一地址中切换路由的 query 参数，例如：

地址1：https://localhost:8080/search?q=跑鞋

地址2：https://localhost:8080/search?q=篮球鞋

问题：当从第一个调到第二个地址时，这时你路由的参数是改变了，但是页面内容不进行刷新，生命周期也不会触发，依然停留在地址1的内容，但是地址栏会变化为地址2。

因为我是组件化的，把 search 单独封装成一个组件，我就以这个 search 跳转为列子，来列出我想到的三个解决方法：

第一种:

在你点击触发了 search 组件的搜索方法，再利用 $emit来触发父级组件的请求方法。

第二种

利用组件内守卫 beforeRouteUpdate 方法来触发请求方法

第三种

在请求数据的页面利用 watch 来监听路由的变化

export default {
  data() {
	page: 1,
	total: 0
  },
  watch:{
    // 监听路由发生改变
    '$route':{
  	  handler(newVal) {
  		if(newVal.query.q) this.requestData()
	  }	
    }
  },
  mounted() {
    this.requestData();
  },
  methods: {
    // 请求数据
    requestData() {
      // 请求参数
      const data = {
          page: this.page,
          keyword: this.$route.query.q,
      };

      /**
       * 请求列表数据
       * GetGoodsList 是我自己封装的请求方法
       */
       GetGoodsList(data).then(res => {
		  if(res.statusCode === 200) {
			const {data, total} = res.data
			this.goods = data
			this.total = total
		  }
	   })
     }
  }
}