Vue3+Router V4调用push跳转时报Cannot read properties of undefined错误求解

• 核心报错根因是router实例引入错误：你直接从vue-router依赖包导入的是Vue Router的核心模块对象，不是你项目中通过createRouter初始化生成的路由实例，该导入对象下没有push方法，调用时自然触发Cannot read properties of undefined (reading 'push')报错。Vue Router v4在<script setup>组合式API场景下，必须通过官方提供的useRouter钩子获取当前项目的路由实例。
• 额外存在的逻辑问题：router.push方法接收的参数是你路由配置中定义的路由path或者name属性，不是组件的本地文件相对路径，你填写的../views/Home.vue属于本地文件路径，即使路由实例正常也无法正常跳转。
• 补充代码问题：通过ref创建的响应式变量，修改值时必须操作其.value属性，你直接写loading = true、message = 错误信息会直接覆盖原始ref对象，丢失响应性。

1. 修正路由实例的获取逻辑
   将原代码中import router from "vue-router"替换为通过useRouter钩子获取实例：

import { useRouter } from "vue-router"
// 组件内调用钩子获取路由实例
const myRouter = useRouter()

2. 修正push方法的传参
   按照你需要跳转的首页地址http://mywebsite/Home，说明路由配置中首页的path为/Home，将所有myRouter.push('../views/Home.vue')替换为：

myRouter.push('/Home')

3. 修正响应式变量的赋值逻辑
   所有修改loading、message的位置都加上.value调用：

// 原来的loading = true 改为
loading.value = true
// 原来的loading = false 改为
loading.value = false
// 原来的message = 错误信息 改为
message.value = (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();

<script setup lang="ts">
import { computed, ref } from "vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import store from '../store/index';
import { useRouter } from "vue-router";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().required("Email obligatoire"),
  password: yup.string().required("Password obligatoire"),
});

const myStore = store;
const myRouter = useRouter();
const loading = ref(false);
const message = ref('');

// 登录状态判断
const loggedIn = computed(() => myStore.state.auth.status.loggedIn);
if (loggedIn.value) {
  myRouter.push('/Home');
}

// 登录提交处理
const handleLogin = (user) => {
  loading.value = true;

  myStore.dispatch("auth/login", user).then(
    () => {
      myRouter.push('/Home');
    },
    (error) => {
      loading.value = false;
      message.value =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
    }
  );
}
</script>

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