Vue.js与Vue-Router：点击同路由router-link时如何重建组件？

这个问题我之前做项目时也碰到过，Vue Router默认情况下，点击指向当前路由的router-link不会触发组件的重建，毕竟路由路径没变化，组件就会被复用，created()、mounted()这些钩子自然不会重新执行。不过有几个靠谱的方案能实现你要的效果：

方法1：给<router-view>绑定动态key #

这是最省心的通用方案，利用Vue的key特性——当key值变化时，组件会被销毁并重新创建，所有生命周期钩子都会从头执行一遍。

你只需要在包含router-view的父组件（比如App.vue）里，把key绑定到$route.fullPath（如果不需要区分查询参数/哈希值，用$route.path也可以）：

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

这样不管是点击当前路由的router-link，还是路由的查询参数、哈希值发生变化，组件都会完全重建，created()和mounted()自然会被触发。

方法2：在目标组件内监听路由变化，手动触发重建 #

如果只想针对某个特定组件处理，不想影响全局路由，可以在组件内部通过watch监听$route，配合v-if手动销毁再重建组件：

先给组件的根元素加v-if控制存活状态：

<template>
  <div v-if="isComponentAlive">
    <!-- 你的组件内容 -->
  </div>
</template>

然后在脚本里实现监听逻辑：

export default {
  data() {
    return {
      isComponentAlive: true
    }
  },
  watch: {
    $route(to, from) {
      // 判断是否是同一个路由跳转
      if (to.path === from.path) {
        // 先销毁组件
        this.isComponentAlive = false
        // 用$nextTick确保DOM更新完成后再重建
        this.$nextTick(() => {
          this.isComponentAlive = true
        })
      }
    }
  },
  created() {
    console.log('组件重新created了！')
  },
  mounted() {
    console.log('组件重新mounted了！')
  }
}

这样点击当前路由的router-link时，watch会触发，组件先被销毁再重建，生命周期钩子也就重新执行了。

方法3：给路由添加临时查询参数（会修改URL） #

这种思路是通过修改路由的查询参数，让路由“看起来发生了变化”，从而触发组件重建。你可以给router-link绑定一个带随机参数的跳转目标：

<router-link 
  :to="{ 
    path: '/your-current-path', 
    query: { ...$route.query, refresh: Date.now() } 
  }"
>
  点击刷新当前组件
</router-link>

每次点击都会给URL加一个refresh参数，值是当前时间戳，路由变化后组件会重新渲染。如果介意URL里的临时参数，可以在组件的created()钩子中移除它：

created() {
  console.log('组件重新created了！')
  // 移除refresh参数，恢复干净的URL
  const { refresh, ...cleanQuery } = this.$route.query
  if (refresh) {
    this.$router.replace({ query: cleanQuery })
  }
}

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