使用NuxtLink时如何在路由跳转前执行Store mutation？

API 探路者

2026-10-6

问题原因

你当前的写法不生效是因为NuxtLink的默认跳转行为和@click绑定的事件是并行执行的，不会等待setPost的mutation执行完成就已经触发了路由跳转，所以目标页面加载时store还未更新，导致逻辑异常。

解决方案

方案1：阻止默认跳转，等mutation执行完成后手动触发路由跳转

这是最直接的适配方案，修改你的原有代码如下：

<!-- 阻止默认跳转行为，调用自定义处理方法 -->
<NuxtLink :to="`/posts/${post.slug}`" @click.prevent="handlePostJump(post)">
  {{ post.title.rendered }}
</NuxtLink>

对应js逻辑：

// Options API写法
methods: {
  handlePostJump(post) {
    // 先执行store mutation
    this.setPost(post)
    // 手动触发路由跳转
    this.$router.push(`/posts/${post.slug}`)
  }
}

// Composition API写法
const handlePostJump = (post) => {
  const router = useRouter()
  setPost(post)
  router.push(`/posts/${post.slug}`)
}

如果你的setPost是异步逻辑（比如需要请求接口拉取数据），只要给方法加async/await即可保证跳转前逻辑执行完成。

方案2：通过页面中间件/路由守卫处理

如果希望无论从哪个入口进入帖子详情页都能保证store更新，可以在详情页添加专属中间件处理：

// /pages/posts/[slug].vue 文件头部添加
definePageMeta({
  middleware: [
    async (to) => {
      const postStore = usePostStore()
      // 从路由参数拿到slug，更新对应post数据到store
      await postStore.setPostBySlug(to.params.slug)
    }
  ]
})

这个方案不需要修改原有的跳转触发逻辑，普适性更强。