图片切换为红色时可以跳转页面，图片不是红色打钩状态不能跳转，该怎么往下写

这是第二张图片

<template>
  <div>
    <div class="collect">
      <img
        src="../assets/images/hook.png"
        v-show="downIcon"
        @click="collect"
        v-bind:checked="!isChecked"
      />
      <img
        src="../assets/images/hook_red.png"
        v-show="!downIcon"
        @click="collect"
        v-bind:checked="isChecked"
      />
      <router-link to="/"><button v-bind:disabled="isDisabled" >下一步</button></router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downIcon: true,
      isDisabled: false,
      isChecked: false,
    };
  },
  methods: {
    collect() {
      this.downIcon = !this.downIcon;
      this.isChecked = !this.isChecked;
      if (this.isChecked == true) {
        this.isDisabled = true;
        console.log("下一步")
      } else {
        this.isDisabled = false;
        console.log("不可以")
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

不要用router-link，给button加一个点击事件，然后判断isChecked 状态

 
<template>
  <div>
    <div class="collect">
      <img
        src="../assets/images/hook.png"
        v-show="downIcon"
        @click="collect"
        v-bind:checked="!isChecked"
      />
      <img
        src="../assets/images/hook_red.png"
        v-show="!downIcon"
        @click="collect"
        v-bind:checked="isChecked"
      />
      <button @click="goNext">下一步</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      downIcon: true,
      isDisabled: false,
      isChecked: false
    }
  },
  methods: {
    collect () {
      this.downIcon = !this.downIcon
      this.isChecked = !this.isChecked
      if (this.isChecked === true) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
    },
    goNext () {
      if (this.isDisabled) {
        this.$router.push('/')
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
</style>
 

将router-link去掉，button绑定@click事件，使用this.$router.push('/')方法跳转