【SDU项目实训2019级】router-link的:to 和@click谁先执行

最新推荐文章于 2023-10-03 23:04:48 发布

玛卡巴卡哒哒

最新推荐文章于 2023-10-03 23:04:48 发布

阅读量741

点赞数 2

CC 4.0 BY-SA版权

分类专栏： SDU项目实训文章标签： javascript elementui webview

本文链接：https://blog.csdn.net/weixin_45704996/article/details/125123630

在Vue应用中，遇到一个(router-link)标签同时处理页面跳转和触发JS函数的问题。原本的@click事件无法正常执行，原因是router-link会阻止默认的click事件。根据Vue2.0文档，为@click添加.native修饰符可以使得事件在子组件上正确触发。修复后的代码中，点击后先执行了JS函数，然后进行页面跳转，实现了所需功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写下面的代码的时候：


                <div class="section-title">

                  <router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>

                </div>

由于点击这个router-link会触发两个不同的事件，一个是href属性所对应的链接，一个是@click，然后我发现，我每次点击，并不会触发我的@click里面调用的js函数，搜了一下，然后发现：

原因：router-link会阻止click，mouseover事件，只用click不用native，事件不会触发。

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。（转发的router-link 点击事件 - 掘金 (juejin.cn)）

然后将@click事件加上了native：

                <div class="section-title">

                  <router-link tag="a" :to="{path: '/contentAll',query:{id

最低0.47元/天解锁文章

200万优质内容无限畅学