vue路由名字不变，仅query发生变化，点击返回页面不重新渲染

版权声明： https://blog.csdn.net/xiasohuai/article/details/84192947

方式一：可以用watch+vuex

watch: {
　　'$route': function (to, from) {
        // 我这里还是用了Vuex，不过应该不影响理解
        this.$store.dispatch('updateActiveTemplateId', this.$route.query.templateId)
        // 通过更新Vuex中的store的数据，让数据发生变化
        this.getTemplateById()
　　}
},

方式二：可以使用watch+时间戳的方法（此方法，即使统一路由名+同一query，点击时也会重新渲染页面，发送请求）

个人喜欢这一种，因为，他是在主页面Home.vue加的，而不是在每个页面需要的页面加

<template>
  <div id="home">
    <top class="header" v-if="$store.state.isHeader"></top>
    <article>
      <router-view :key="activeDate"/>
    </article>
    <bottom class="footer" v-if="$store.state.isFooter"></bottom>
  </div>
</template>

watch: {
      $route: {
        handler() {
          this.activeDate=new Date().getTime()
        },
        immediate: true
      }
    },

方式三：导航守卫中的组件守卫（这个是针对某个组件的）

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

vue-router官方地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB