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

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

<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后，就可以代码如上