Vue3+Vue Router4环境下如何在组件内实现编程式路由跳转

方案1：使用Composition API（优先推荐） #

vue-router 4 针对Vue3的Composition API提供了官方的useRouter、useRoute组合式函数，直接在setup中调用即可获取路由实例，不需要通过this访问。修改后的代码如下：

<template>
  <q-page>
    <q-card>
      <q-form @submit.prevent="handleSubmit" >
        <q-input v-model="param" />
        <q-btn label="submit" type="submit" />
      </q-form>
      <router-link to="/">Go to Foo</router-link>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup () {
    const param = ref(null);
    // 获取路由实例
    const router = useRouter();

    const handleSubmit = async () => {
       // 执行业务逻辑
       // 实现路由跳转，支持字符串路径、对象等写法
       router.push('/target-route')
       // 带参数跳转示例：router.push({ path: '/target-route', query: { param: param.value } })
    }

    return { param, handleSubmit }
  }
}
</script>

这种写法是Vue3生态的标准用法，和你使用状态管理时直接调用useStore/usePinia的逻辑一致，不需要再用mapState/mapActions这类适配选项式API的工具函数。

方案2：保留选项式API写法 #

如果你确实需要保留methods配置，首先确认项目入口已经正确通过app.use(router)完成路由注册，正常情况下选项式API中可以直接访问this.$router和this.$route。如果仍返回undefined，属于setup和选项式API混用导致的上下文异常，更建议切换为方案1的写法。

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