方式一：可以用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