如何强制nuxt-link点击同路径路由时触发页面重新渲染？

为什么绑定:key不生效 #

你将key绑定在<nuxt-link>组件上是无效的，key的作用是控制VNode的重渲染，需要绑定在对应要刷新的页面容器（<Nuxt> / <NuxtPage>）或者页面根组件上才能生效，该问题和i18n的localePath方法无关，localePath仅负责生成对应语种的路由路径，不影响路由匹配逻辑。

方案1：全局配置页面容器key（最简单，适配带参数跳转场景） #

不需要修改任何现有nuxt-link代码，在全局布局文件（通常是layouts/default.vue）中修改页面渲染入口的key绑定即可：

Nuxt 2 写法

<!-- layouts/default.vue -->
<template>
  <div>
    <!-- 用fullPath作为key，只要路径（含查询参数、哈希）变化就会强制重渲染页面 -->
    <nuxt :key="$route.fullPath" />
  </div>
</template>

Nuxt 3 写法

<!-- layouts/default.vue -->
<template>
  <div>
    <NuxtPage :key="$route.fullPath" />
  </div>
</template>

方案2：封装自定义链接组件（支持完全同路径点击强制重渲染） #

如果需要即便是完全相同的路径（含参数完全一致）点击也触发重渲染，可以封装全局的自定义链接组件替代原生nuxt-link，一劳永逸适配所有链接：

1. 新建全局组件components/AppLink.vue

<template>
  <nuxt-link :to="to" @click.native="handleClick">
    <slot />
  </nuxt-link>
</template>

<script>
export default {
  props: {
    to: {
      type: [String, Object],
      required: true
    }
  },
  methods: {
    handleClick(e) {
      // 解析目标路径的完整地址
      const targetPath = this.$router.resolve(this.to).href
      // 和当前路径对比，完全一致则强制重渲染
      if (targetPath === this.$route.fullPath) {
        e.preventDefault()
        // 强制重渲染当前路由，如需刷新页面数据可替换为 this.$nuxt.refresh()
        this.$forceUpdate()
      }
    }
  }
}

2. 把项目中所有的<nuxt-link>替换成<AppLink>即可，你的示例代码修改后如下：

<AppLink :to="localePath({path:'/trade?market=BTC_USDT'})">BTC</AppLink>

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