Vue3使用<script setup>语法实现登录后路由跳转报错如何解决？

<script setup>属于组合式API的语法糖，内部不存在选项式API中的组件实例this，所以你之前使用的this.$router写法完全不适用，才会抛出Cannot read properties of undefined (reading '$router')的错误。

Vue3组合式API下需要通过官方提供的useRouter组合式函数获取路由实例，操作步骤如下：

• 第一步：在<script setup>的头部导入useRouter

import { useRouter } from 'vue-router'

• 第二步：在组件顶层同步作用域调用useRouter，拿到路由实例

const router = useRouter()

• 第三步：在登录成功的回调中直接调用路由实例的push方法完成跳转

// 登录请求成功后的回调示例
loginApi(userInfo).then(res => {
  // 其他登录成功逻辑，比如存储token等
  router.push('/profile')
})

useRouter必须在<script setup>的顶层同步作用域调用，不允许放在异步回调、普通函数、循环或条件判断内部初始化，否则会因为执行上下文不符合要求导致无法正确获取路由实例，返回undefined。

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