vue RouterLink 点击原生处理程序在页面重新渲染后停止被调用,

brjng4g3  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(51)

版本

2.7.10

复现链接

codesandbox.io

复现步骤

  1. 点击链接 "Go about"
  2. 在控制台看到 "on click"
  3. 点击链接 "Go home"
  4. 点击链接 "Go about"

预期结果是什么?

控制台应该显示 "on click" 两次。

实际发生的情况是什么?

在控制台只显示了一次 "on click"。

vq8itlhq

vq8itlhq1#

如果异步加载页面(https://codesandbox.io/s/angry-sun-y90on7?file=/src/main.js),则处理程序永远不会被调用。

weylhg0b

weylhg0b2#

你可以使用span作为router-link的插槽,并将其绑定到点击处理程序。

yvgpqqbh

yvgpqqbh3#

你只能用RouterLink重现这个现象,而不能用其他组件吗?

vulvrdjw

vulvrdjw5#

值得注意的是,我在Nuxt issue中整理了一个复现版本,nuxt/nuxt#10593(评论)。
我还查看了这些更改,并确认在Vue 2.6.14和两个Vue Router版本(3.5.13.6.5)上都能按预期工作,然后在Vue 2.7.14和两个版本上出现问题,所以我认为这与Vue Router的更改无关。
话虽如此,关于正确使用router-link的方法有文档可以参考,确实解决了这个问题,参见https://v3.router.vuejs.org/api/#v-slot-api-3-1-0。
以你的例子为例,@youngpirate32,这里有一个使用插槽方法的工作版本,https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-hzr4u4?file=/src/views/AboutView.vue。这也修复了异步版本,https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-async-mqb3o3?file=/src/views/HomeView.vue
@yyx990803虽然这确实解决了问题,但我仍然好奇为什么原生支持点击事件的操作顺序之前是@click,现在不再支持。如果这只是优化的一个例子,我也不会感到惊讶。
总之,这里有一种有效的、有文档记录的方法可以解决这个问题,所以这可能根本不是一个bug。希望这对你有所帮助!

doinxwow

doinxwow6#

你好。有没有可能修复这个问题?实际上这是一个巨大的回归,而且建议的解决方法并不总是适用。谢谢。

相关问题