iOS滑动返回后Vue <router-link>首次点击无响应问题求助

问题根因 #

该异常由iOS WebKit内核自带的**后退缓存（bfcache）**特性与Vue响应式逻辑冲突导致：滑动手势返回页面时，页面会直接从bfcache中恢复，不会触发常规的Vue组件挂载/更新生命周期，v-show控制的DOM可见状态切换后，交互事件没有被正确激活，第一次点击会被浏览器默认拦截。

可行解决方案 #

方案1：监听pageshow事件，从缓存恢复时强制更新组件 #

在App.vue的mounted钩子中注册页面显示监听，检测到页面从bfcache恢复时手动触发组件更新，同步状态：

// Vue2 写法
mounted() {
  window.addEventListener('pageshow', e => {
    if (e.persisted) {
      this.$forceUpdate()
    }
  })
}

// Vue3 写法
import { getCurrentInstance, onMounted } from 'vue'
onMounted(() => {
  const instance = getCurrentInstance()
  window.addEventListener('pageshow', e => {
    if (e.persisted) {
      instance?.proxy?.$forceUpdate()
    }
  })
})

方案2：替换v-show为v-if，强制DOM销毁重建 #

v-show仅切换CSS的display属性，bfcache恢复后容易出现DOM状态和Vue内部响应式状态不同步的问题，换成v-if会在状态切换时销毁重建DOM，彻底避免状态不一致：

<div class="row">
    <div class="col col-12 col-lg-4 idcvs" v-if="!mobileMode || typeof $route.params.id == 'undefined'">
        <ListConversation />
    </div>
    <div class="col col-12 col-lg-8 idchat" v-if="!mobileMode || $route.params.id > 0">
        <router-view :key="$route.path" />
    </div>
</div>

方案3：给列表组件绑定动态key，路由变化时自动重建 #

如果不想修改v-show逻辑，可以给用户列表组件绑定和路由参数关联的动态key，返回后key变化会自动触发组件重建，恢复交互：

<ListConversation :key="$route.params.id || 'conversationList'" />

方案4：禁用页面bfcache（仅万不得已时使用，会降低后退加载速度） #

在页面head中加入禁止缓存的meta标签即可：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

内容的提问来源于stack exchange，提问作者Luân Đình