如何实现点击提交按钮前禁用Router Link，点击后启用跳转至Page Two

Hey there! Let's sort out this Router Link toggle issue you're facing. The problem with just trying to disable the click event directly is that <router-link> has its own built-in navigation logic that can bypass simple event blocking. Here's a reliable, easy-to-implement fix using reactive state (I'll cover both Vue 3 and Vue 2 since you didn't specify the version):

Step 1: Track Button Click Status with Reactive State #

First, we'll add a reactive variable to keep track of whether the submit button has been clicked. This will control when the Router Link is usable.

Step 2: Update State on Button Click #

Bind a click handler to your submit button that sets the state to true (enabling the link) when clicked. You can also add any other submit logic here (like form validation or API calls) if needed.

Step 3: Control Router Link Navigation #

Since <router-link> doesn't have a native disabled attribute, we'll combine two things:

• A dynamic CSS class to visually indicate the link is disabled
• A click handler that only triggers navigation if the state allows it

Vue 3 Example (Composition API) #

<template>
  <div class="page-one">
    <!-- Submit Button -->
    <button @click="enableNavigation">Submit</button>

    <!-- Controlled Router Link -->
    <router-link 
      to="/page-two"
      :class="{ disabled: !isLinkEnabled }"
      @click.prevent="handleLinkClick"
    >
      Go to Page Two
    </router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// Track if link should be enabled
const isLinkEnabled = ref(false)

const enableNavigation = () => {
  isLinkEnabled.value = true
  // Add your submit logic here (e.g., form submission, validation)
}

const handleLinkClick = () => {
  // Only navigate if the link is enabled
  if (isLinkEnabled.value) {
    router.push('/page-two')
  }
}
</script>

<style scoped>
/* Visual styling for disabled state */
.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none; /* Optional: Prevents cursor interaction */
}
</style>

Vue 2 Example (Options API) #

<template>
  <div class="page-one">
    <button @click="enableNavigation">Submit</button>

    <router-link 
      to="/page-two"
      :class="{ disabled: !isLinkEnabled }"
      @click.prevent="handleLinkClick"
    >
      Go to Page Two
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLinkEnabled: false
    }
  },
  methods: {
    enableNavigation() {
      this.isLinkEnabled = true
      // Add your submit logic here
    },
    handleLinkClick() {
      if (this.isLinkEnabled) {
        this.$router.push('/page-two')
      }
    }
  }
}
</script>

<style scoped>
.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}
</style>

Why Your Initial Approach Failed #

The <router-link> component renders a native <a> tag, and Vue Router handles navigation through its own internal event listeners. Just trying to disable the click event won't fully override this logic. By using a reactive state to explicitly control when router.push() is called, you get full, reliable control over the navigation flow.

内容的提问来源于stack exchange，提问作者Codey