Vue3中setup内声明的router如何在methods中访问？

方案1：将router暴露到组件实例，通过this访问 #

在setup()里获取router后，把它作为返回值的一部分，这样Options API的methods就能通过this.router调用路由方法：

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

export default {
  setup() {
    const router = useRouter()
    // 把router暴露给组件实例，供methods调用
    return { router }
  },
  methods: {
    goToTargetPage() {
      this.router.push('/target-page')
    }
  }
}
</script>

方案2：全Composition API写法（更推荐） #

如果项目以Composition API为主，没必要混用methods，直接在<script setup>里定义导航函数就行：

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

const router = useRouter()

// 直接定义导航函数，模板里可以直接调用
const goToTargetPage = () => {
  router.push('/target-page')
}
</script>

<template>
  <button @click="goToTargetPage">跳转到目标页</button>
</template>

补充说明 #

useRouter是Composition API专属钩子，只能在setup函数内部或者基于Composition API的自定义钩子/函数里使用，Options API的methods不在这个调用上下文里，所以直接调用会返回undefined。

内容的提问来源于stack exchange，提问作者Jean François Manatane