如何通过Vue Router link重新加载当前激活的组件

仅靠router-link默认行为确实没法直接实现，因为Vue Router会跳过同路径的导航。不过可以通过给router-link加额外逻辑、配合路由配置来达成需求，下面是几种实用方案：

方案1：给路由添加动态Query参数 #

在点击router-link时，附加一个随机参数（比如时间戳），让每次点击的路由看起来是“新”的，触发组件更新：

修改你的router-link部分，给:to添加query参数：

<router-link 
  v-if="item.link != '#'" 
  :to="{ path: item.link, query: { t: Date.now() } }"
>
  <i :class="item.icon"></i>
</router-link>

<!-- 对应sandbox的路由也一样修改 -->
<router-link 
  v-if="sandboxPermission == true" 
  :to="{ path: '/sandbox', query: { t: Date.now() } }"
>
  <i class="fa-solid fa-file-code"></i>
</router-link>

这样每次点击已激活的链接时，URL会带上?t=xxxxxx的参数，Vue Router会认为是新导航，触发组件的beforeRouteUpdate钩子（Vue 2）或者onBeforeRouteUpdate（Vue 3），你可以在这个钩子里面重新调用API拉取数据，不用等组件重新挂载。

方案2：手动触发路由刷新 #

如果不想加Query参数，可以给router-link绑定点击事件，手动调用路由跳转逻辑：

先在组件里引入router（Vue 2用this.$router，Vue 3用useRouter），然后修改点击逻辑：

<li v-for="(item,i) in MainNavLinks"
    :key="i"
    :class="{'active-main-menu-item': i === activeIconIndex}"
    v-on:click="selectIconItem(i,$event)">
  <router-link 
    v-if="item.link != '#'" 
    :to="item.link"
    @click.native="handleActiveLink(item.link)"
  >
    <i :class="item.icon"></i>
  </router-link>
  <!-- 其他代码不变 -->
</li>

然后添加处理函数：

// Vue 2写法
methods: {
  handleActiveLink(link) {
    if (this.$route.path === link) {
      // 强制触发路由更新，用当前query+时间戳避免重复
      this.$router.replace({ 
        path: link, 
        query: { ...this.$route.query, t: Date.now() } 
      })
    }
  }
}

// Vue 3组合式API写法
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const handleActiveLink = (link) => {
  if (route.path === link) {
    router.replace({ 
      path: link, 
      query: { ...route.query, t: Date.now() } 
    })
  }
}

这种方法通过点击事件手动触发带参数的路由跳转，绕过了默认的同路径导航跳过逻辑。

方案3：组件内监听路由变化 #

如果不想修改router-link，可以在目标页面组件里监听路由变化，只要路由触发就重新拉取数据：

// Vue 2组件内写法
watch: {
  '$route'(to, from) {
    if (to.path === from.path) {
      this.fetchData() // 你的API拉取函数
    }
  }
}

// Vue 3组合式API写法
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

watch(route, (to, from) => {
  if (to.path === from.path) {
    fetchData() // 你的API拉取函数
  }
}, { deep: true })

这种方法不需要改动router-link，但需要在每个需要刷新的页面组件里添加监听逻辑。

总结：如果只想围绕router-link实现，方案1是最直接的——给to对象加动态query参数，让每次点击都触发路由更新，进而触发组件的数据刷新逻辑。

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