vue学习笔记二：vue-router如何在router-link标签绑定click点击事件

这几天给自己的一个移动端的项目，增加一个底部的导航栏，然后可以点击的时候，进行切换代码如下：<router-link :to="{name:'home'}" class="btn1" tag="a"@click.native='showFooterNav' ><img class="ic

半夏ing

3912人浏览 · 2018-04-09 21:40:23

半夏ing · 2018-04-09 21:40:23 发布

这几天给自己的一个移动端的项目，增加一个底部的导航栏，然后可以点击的时候，进行切换
代码如下：

<router-link :to="{name:'home'}" class="btn1" tag="a"  @click.native='showFooterNav' >
        <img class="icon" src="../../static/img/footer_icons1.png" v-show="pageStatus=='home'">
        <img class="icon" src="../../static/img/footer_icons2.png" v-show="pageStatus!='home'">
        <div>首页</div>
</router-link>
 <router-link :to="{name:'importantpart'}" class="btn1" tag="a" @click.native='showFooterNav'>
        <img class="icon" src="../../static/img/footer_icons3.png" v-show="pageStatus=='importantpart'">
        <img class="icon" src="../../static/img/footer_icons4.png" v-show="pageStatus!='importantpart'">
        <div>精选专区</div>
</router-link>
<router-link :to="{name:'mine'}" class="btn1" tag="a" @click.native="showFooterNav">
        <img class="icon" src="../../static/img/footer_icons5.png" v-show="pageStatus=='mine'">
        <img class="icon" src="../../static/img/footer_icons6.png" v-show="pageStatus!='mine'">
        <div>我的</div>
</router-link>

刚开始的时候，没有给点击事件添加native,然后就没有生效
原因：

router-link会阻止click事件

添加native后，就可以代码如上

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^