Vue @ click and the occasional failure of router-link

Binding elements to @ click events in

vue occasionally causes unresponsive clicks

in addition, the use of router-link places for route redirection will occasionally have the problem of clicking unresponsive

.

I have checked a lot of information, but I still haven"t found the problem. Do any gods know what"s going on?

partial code of the project:

<div class="x-page__header van-hairline--bottom"
         v-show="!hideHeader">
      <!--  -->
      <a href="javascript:history.back();"></a>
      <!--  -->
      <slot name="header">
        <span class="x-page__title">{{$route.meta.Chinese}}</span>
      </slot>
      <router-link tag="div"
                   to="/"
                   replace
                   class="header-menu">
        <i class="icon-shouye-h"
           style="font-size:.4rem"></i>
      </router-link>
    </div>
<div class="x-reader__menu">
        <span class="x-reader__menu--item x-reader__menu--prev"
              :style="systemStyle"
              @click="prevChapter"></span>
        <span class="x-reader__menu--item x-reader__menu--catalog"
              :style="systemStyle"
              @click="toCatalog"></span>
        <span class="x-reader__menu--item x-reader__menu--next"
              :style="systemStyle"
              @click="nextChapter"></span>
      </div>
   </div>
Jan.08,2022
The invalidation of

click is due to the bubbling of span. You only need to add no bubbling to the function. @ click.stop
router-link question: check whether you touch the element


router-link Click No response to see if the route has changed. There is no problem with @ click Click No response from the code point of view. You print in the click event function or alert (123) , maybe there is a problem written in the click event function.

Menu