如何在NuxtLink路由跳转前执行方法并决定是否放行？

单个NuxtLink的处理方式 #

Nuxt3（组合式API） #

通过@click.prevent阻止默认跳转行为，在自定义方法中完成判断逻辑后，手动控制是否跳转：

<template>
  <NuxtLink to="/target-page" @click.prevent="handleBeforeNavigate">跳转目标页</NuxtLink>
</template>

<script setup>
const count = ref(12) // 示例状态变量

// 跳转前的判断逻辑，支持异步操作
const handleBeforeNavigate = async () => {
  // 模拟异步校验（比如请求后端接口、检查用户权限）
  const isAllowed = await checkPermission()

  if (isAllowed) {
    // 允许跳转时，使用navigateTo完成路由跳转
    await navigateTo('/target-page')
  } else {
    // 不允许跳转时的处理，比如提示用户
    alert('不符合跳转条件，无法继续')
  }
}

// 模拟校验方法
const checkPermission = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(count.value > 10) // 示例判断条件
    }, 500)
  })
}
</script>

Nuxt2（选项式API） #

逻辑类似，使用this.$router.push完成手动跳转：

<template>
  <NuxtLink to="/target-page" @click.prevent="handleBeforeNavigate">跳转目标页</NuxtLink>
</template>

<script>
export default {
  data() {
    return {
      count: 8
    }
  },
  methods: {
    async handleBeforeNavigate() {
      const isAllowed = await this.checkPermission()
      if (isAllowed) {
        this.$router.push('/target-page')
      } else {
        alert('权限不足，无法跳转')
      }
    },
    checkPermission() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(this.count > 10)
        }, 500)
      })
    }
  }
}
</script>

全局批量拦截特定路由 #

如果多个页面需要相同的跳转校验逻辑，可以用全局路由守卫统一处理：

Nuxt3 #

在plugins/router.ts中添加路由前置守卫：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.beforeEach((to, from, next) => {
    // 指定需要拦截的路由（可根据实际需求调整）
    const needCheckRoutes = ['/target-page', '/admin']
    if (needCheckRoutes.includes(to.path)) {
      // 执行校验逻辑（示例从状态中取判断条件）
      const isAllowed = nuxtApp.$pinia.state.user.count > 10
      if (isAllowed) {
        next() // 放行
      } else {
        next(false) // 阻止跳转
        // 也可跳转到其他页面：next('/login')
      }
    } else {
      next() // 其他路由直接放行
    }
  })
})

Nuxt2 #

在plugins/router.js中配置：

export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    const needCheckRoutes = ['/target-page', '/admin']
    if (needCheckRoutes.includes(to.path)) {
      const isAllowed = app.store.state.user.count > 10
      if (isAllowed) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  })
}

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