Vue.js 如何禁用VueJS中的按钮以避免冗余的路线导航？有条件单击事件是否可能？

在我正在使用的应用程序中，我有一个

Home

按钮，当有人点击

Home

时，我想阻止抛出错误。我现在得到的错误是

Error in v-on handler (Promise/async): "NavigationDuplicated: Avoided redundant navigation to current location: "/"."

目前，我的标签在代码中看起来像这样：

<img @click="$router.push({ path: '/' })" src="/svgs/home.svg" class="home-btn" />

---

是否有一个包含click事件的条件语句？V-if似乎不起作用。

您可以通过使用

$route

检查当前路径来禁用该按钮

---

请参阅文档-

有多种方法可以做到这一点。如果您使用的是

，则只需通过检查当前路线来使用条件禁用它即可

因为，您正在使用

在侧面注释中，从可访问性的角度考虑，考虑使用<代码>按钮<代码>或<代码> A<代码>元素，并将图像包在里面。如果不是这样，至少在

img

标签中添加

tabindex

---

谢谢你的详细分析！我还是一个新手，我想养成一种习惯，那就是在编写代码时总是考虑到可访问性，所以这一点非常好。干杯

// If using named views
function clickHandler() {
  if (this.$route.name !== 'home') {
    this.$router.push({ path: '/' });
  }
}

// If not using named views
function clickHandler() {
  if (this.$route.path !== '/') {
    this.$router.push({ path: '/' });
  }
}

<img @click="clickHandler" src="/svgs/home.svg" class="home-btn" />