Vue路由底部导航图片点击切换（绝对经典）

最新推荐文章于 2023-03-31 17:04:27 发布

外包猿

最新推荐文章于 2023-03-31 17:04:27 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43540973/article/details/108053187

前端技术专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种在Vue中实现底部导航图标点击切换的方法。一种是通过为图片添加点击事件改变图片源，另一种是利用Vue的条件渲染指令，使代码更简洁。详细展示了代码实例，适用于如京东等电商应用底部导航的动态显示。

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

Vue路由底部导航图片点击切换（绝对经典）

需求：实现图标点击进行切换，（使用场景：京东图标底部导航的切换显示）

在这里插入图片描述

我这边为大家写出了两种方法：

1、为图片添加点击事件，在点击事件中改变图片地址

1.1、在app组件中添加显示图片代码

    <router-link to='/fruits'> <img :src="fruitsimg" @click="fruitsclick" width="50px height: 50px;">水果</router-link>
    &nbsp;
    <router-link to="/vegetables"><img :src="vegetablesimg" @click="vegetablesclick" width="50px height: 50px;">蔬菜</router-link>
    &nbsp;
    <router-link to='/dried'><img :src="driedimg" @click="driedclick" width="50px height: 50px;">干果</router-link>
    &nbsp;
    <router-link to='/seafood'><img :src="seafoodimg" @click="seafoodclick" width="50px height: 50px;">海鲜</router-link>

1.2、编写点击事件

fruitsclick(){
      this.fruitsimg = '/img/水果图标1.png';
          this.vegetablesimg ='/img/蔬菜图标2.png' ;
          this.driedimg ='/img/干果图标2.png';
          this.seafoodimg='/img/海鲜图标2.png';
    },
    vegetablesclick(){
      this.vegetablesimg = '/img/蔬菜图标1.png';
      this.fruitsimg = '/img/水果图标2.png';
      this.driedimg ='/img/干果图标2.png';
      this.seafoodimg='/img/海鲜图标2.png';
    },
    driedclick(){
      this.driedimg = '/img/干果图标1.png';
      this.fruitsimg = '/img/水果图标2.png';
      this.vegetablesimg ='/img/蔬菜图标2.png' ;
      this.seafoodimg='/img/海鲜图标2.png';
    },
    seafoodclick(){
      this.seafoodimg = '/img/海鲜图标1.png';
      this.fruitsimg = '/img/水果图标2.png';
      this.vegetablesimg ='/img/蔬菜图标2.png' ;
      this.driedimg ='/img/干果图标2.png';
    }

2、通过vue的条件渲染制令进行判断显示图片（推荐，因为代码更简洁）

2.1、定义两个boolean变量（需要显示几个图片就需要几个变量），用于判断显示的图片

 data(){
    return{
      ganshuoactivate:true,
      shucaiactivate:false,
     
    }
  },

2.2、在div中添加图片显示：

 <div class="tab-item">
        <img v-if="!ganshuoactivate"  @click="homeclick" src="/ganguo.png">
        <img v-else  @click="homeclick" src="/ganguo-selected.png">

        <img  v-if="!shucaiactivate"  @click="userclick" src="/shucai.png">
        <img  v-else @click="userclick" src="/shucai-selected.png">
    </div>

    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

2.3、为其添加点击事件（当图片被点击时，将该图片的Boolean值为false，其余的为true，为显示子组件）

homeclick(){
      // 进行跳转
      this.ganshuoactivate = true;
      this.shucaiactivate = false;
      this.$router.push('/home');
      console.log('home..');
    },
    userclick(){
      this.ganshuoactivate = false;
      this.shucaiactivate = true;
      // 进行跳转
      this.$router.push('/mine/'+this.userid);
      console.log('user..');
    }
  }

this.$router.push('/mine/'+this.userid);
      console.log('user..');
    }
  }