Question

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

2021-04-24

2538

vue.js vuejs3 vue-router vite

伙计们，我在 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,
    };
  },

Answer 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,
    };
  },