TypeError：无法使用 Vue 路由器和 Vue 3 读取未定义的属性“推送”答案

【问题标题】：TypeError: Cannot read property 'push' of undefined using Vue router and Vue 3TypeError：无法使用 Vue 路由器和 Vue 3 读取未定义的属性“推送”
【发布时间】：2021-07-18 17:46:11
【问题描述】：

伙计们，我在 Vue 3 和 Vite 中遇到问题，我正在尝试使用路由器，但我遇到了问题，因为他们没有找到它。

    props: ["usuario", "senha"],

  setup(props) {
    const mensagemErro = ref("");

    async function login() {
      try {
        const { data } = await services.post("auth/login", {
          userName: props.usuario,
          password: props.senha,
        });
        console.log(data);
        const { token, userName } = data;
        window.localStorage.setItem("token", token);
        this.$router.push("/home");
      } catch (error) {
        console.log(error);
      }
    }

    return {
      login,
      mensagemErro,
    };
  },

【问题讨论】：

我猜这是this 属性的范围问题。尝试将您的登录功能更改为箭头功能const login = async () =>{}

标签： vue.js vuejs3 vite

【解决方案1】：

您应该使用可组合函数useRouter 来获取实例路由器：

import {useRouter} from 'vue-router'
export default{
    props: ["usuario", "senha"],

  setup(props) {
    const mensagemErro = ref("");
   const router=userRouter();
   
   async function login() {
      try {
        const { data } = await services.post("auth/login", {
          userName: props.usuario,
          password: props.senha,
        });
        console.log(data);
        const { token, userName } = data;
        window.localStorage.setItem("token", token);
        router.push("/home");
      } catch (error) {
        console.log(error);
      }
    }

    return {
      login,
      mensagemErro,
    };
  },

【讨论】：