VUE—底部导航路由切换时更换图片（图文）

VUE—底部导航路由切换时更换图片

第一步：布局
给每个底部导航路由都绑定一个点击事件，不要绑定在router-link上，那样会不生效，并且动态的添加图片路径
v-for也行，那样需要动态的绑定方法，可参考
v-for时动态绑定函数

<mt-tab-item>
          <router-link to="/Home">
            <div @click="homeFn">
              <img :src="homeUrl" alt="">
              <p>首页</p>
            </div>
          </router-link>
        </mt-tab-item>
        <mt-tab-item>
          <router-link to="/Discover">
            <div @click="discoverFn">
              <img :src="discoverUrl" alt="">
              <p>发现</p>
            </div>
          </router-link>
        </mt-tab-item>
        <mt-tab-item>
          <router-link to="/Photo">
            <img src="@/assets/img/photo.jpg" alt="">
          </router-link>
        </mt-tab-item>
        <mt-tab-item>
          <router-link to="/Message">
            <div @click="messageFn">
              <img :src="messageUrl" alt="">
              <p>消息</p>
            </div>
          </router-link>
        </mt-tab-item>
        <mt-tab-item>
          <router-link to="/My">
            <div @click="myFn">
              <img :src="myUrl" alt="">
              <p>我的</p>
            </div>
          </router-link>
        </mt-tab-item>

第二步： data

homeUrl: require('@/assets/img/home.jpg'), // 未变化前首页路由的图片路径
discoverUrl: require('@/assets/img/home.jpg'), // 未变化前发现发现路由的图片路径
messageUrl: require('@/assets/img/message.jpg'), // 未变化前消息路由的图片路径
myUrl: require('@/assets/img/my.jpg'), // 未变化前我的路由的图片路径

第三步：方法
就是点击当前路由，让当前路由的图片路径发生变化，并让其他路由的图片恢复为最初状态，比较容易理解，就是写起来粘贴复制有些麻烦
其实这样的方法有些笨，欢迎给出建议，?

homeFn () {
        this.homeUrl = require('@/assets/img/home_new.jpg')
        this.discoverUrl = require('@/assets/img/discover.jpg')
        this.messageUrl = require('@/assets/img/message.jpg')
        this.myUrl = require('@/assets/img/my.jpg')
      },
      discoverFn () {
        this.homeUrl = require('@/assets/img/home.jpg')
        this.discoverUrl = require('@/assets/img/discover_new.jpg')
        this.messageUrl = require('@/assets/img/message.jpg')
        this.myUrl = require('@/assets/img/my.jpg')
      },
      messageFn () {
        this.homeUrl = require('@/assets/img/home.jpg')
        this.discoverUrl = require('@/assets/img/discover.jpg')
        this.messageUrl = require('@/assets/img/message_new.jpg')
        this.myUrl = require('@/assets/img/my.jpg')
      },
      myFn () {
        this.homeUrl = require('@/assets/img/home.jpg')
        this.discoverUrl = require('@/assets/img/discover.jpg')
        this.messageUrl = require('@/assets/img/message.jpg')
        this.myUrl = require('@/assets/img/my_new.jpg')
      }

效果如下
最原始状态
在这里插入图片描述
点击首页

点击发现