山东中讯网站建设专业外贸网站制作价格

原代码：(偶尔跳转不了的)

const onClick=()=>{router.push(`/myDetail?id=${id}`)
}

发生时机：

部署上线后，移动端部分点击跳转至新页面的事件没反应，不报错，没警告！！！

原因一：

Vue Router 使用的问题，在 Vue 3 中，router.push 是异步操作，通常它没有问题，但某些情况下，可能需要确保路由状态已经准备好。而我直接使用router.push，如果它被触发的方式有问题，比如触发的时机不对，可能会导致路由跳转失败

解决方法一：

使用 nextTick 确保 Vue 完成渲染后再跳转！！（好用，立马解决问题）

import { nextTick } from 'vue';const onClick=()=>{nextTick(() => {router.push(`/myDetail?id=${id}`)});
}

原因二：

在某些情况下（例如元素嵌套或者父组件监听了事件），事件可能会被阻止或没有正确传播

解决方法二：

检查是否有其他地方阻止了点击事件的传播，特别是在父组件或其他地方是否使用了 @click.stop 或 @click.prevent。

仅做日常bug记录，有问题欢迎评论区留言(*╹▽╹*)~