Vue项目中给导航的router-link组件添加点击事件


字数:488 阅读时长:2分钟 阅读:85

最近开发Vue项目过程中遇到一个问题,在给 <router-link /> 添加 @click 点击事件时,不起任何作用,后来经过查阅文档才得知,给一个封装的组件上直接添加原生事件需要使用 .native 修饰符。

Vue router-link

开发场景

一个使用 Vue2.x 构建的移动H5项目,为了拥有原生APP和小程序的体验,在一级页面底部设计了 navbar 快捷入口。所以自然就选择了 Vue-router 提供的 <router-link /> 组件来做。但是在 router-link 组件中只有 to 参数指定跳转页面的 path,没有提供对应的 click 方法。
本次需求是要在点击导航栏的时候加上埋点事件,所以需要给 <router-link />加上点击事件来处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// navbar.vue

<template>
<div class="navbar">
<router-link v-for="item in list" :key="item.path" tag="div"
:to="{ path: item.path }"
class="nav-list">
<div class="nav-ico" :class="[item.className]" />
<div class="nav-text" @click="click('home')"> {{ item.title }} </div>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
path: '/home',
className: 'nav-ico-home',
title: '首页',
},
{
path: '/list',
className: 'nav-ico-list',
title: '列表',
},
]
}
},
methods: {
click(text) {
console.log(text)
// 埋点事件
},
},
}
</script>

解决

native修饰符官方介绍:你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on.native 修饰符:

  • 例:
1
<custom-component v-on:click.native="onClick" />

所以要解决 router-lick 添加 @click 点击事件失效的问题,需要这样来解决:

1
2
3
4
5
6
<router-link v-for="item in list" :key="item.path" tag="div"
:to="{ path: item.path }"
class="nav-list">
<div class="nav-ico" :class="[item.className]" />
<div class="nav-text" @click.native="click('home')"> {{ item.title }} </div>
</router-link>

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-01-05
最后更新: 2022-01-05
本文标题: Vue项目中给导航的router-link组件添加点击事件
本文链接: https://www.tiven.cn/p/e2528169/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^