사용자를 다른 페이지로 보내는 것을 중지하려면 어떻게 해야 합니까?

사용자를 다른 페이지로 보내는 것을 중지하려면 어떻게 해야 합니까?

다음과 같은 논리가 있습니다.사용자는 V2 사용자입니다.사용자는 다음 URL에 접속해 주세요.subHeaderRouter.router. 사용자가 부팅하지 않은 경우this.openModal:

<router-link
  v-for="subHeaderRouter in subHeaderRouters"
  :to="subHeaderRouter.router"
  @click="handleOpenModal()">
</router-link>

handleOpenModal () {
  if (this.IsV2User) return
  this.openModal('changeUserType', 'user.changeUserType')
}

내가 지금 해야 할 일은 단지 멈추는 것이다:toV2가 아닌 사용자입니다.어떻게 하면 될까요?

기본값을 방지할 수 있습니다.<router-link>리슨할 기본이벤트를 지정하지 않고 처리함으로써 동작합니다.click를 사용하여 수동으로 이벤트를 발생시키다.native수식자:

<router-link
  v-for="subHeaderRouter in subHeaderRouters"
  event=""
  :to="subHeaderRouter.router"
  @click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>

handleOpenModal(route) {
    if (this.IsV2User) {
        this.$router.push(route)
    } else {
        this.openModal('changeUserType', 'user.changeUserType')
    }
}

이 경우,event=""이상하다고 생각됩니다만, 빈 어트리뷰트에서도 동작합니다.

<router-link
  v-for="subHeaderRouter in subHeaderRouters"
  event
  :to="subHeaderRouter.router"
  @click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>

Vue 3 솔루션

Vue3에서는event에서 삭제되었습니다."<router-link>대신 v-slot API를 사용해야 합니다.

 <router-link :to="yourRoute" custom v-slot="{ href, navigate }">
    <a v-if="yourBoolean" @click="handleEvent()">Run the function</a>
    <a
        v-else
        :href="href"
        @click="navigate">
        Go to route in "to"
    </a>
</router-link>

// Vue 3 Composition API

export default {  
    setup() {
        const handleEvent = () => {
            
           // Add your logic here
      
        }
    }
};

언급URL : https://stackoverflow.com/questions/44815465/how-to-stop-router-link-from-sending-the-user-to-another-page