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

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

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue