Vuejs 3 Router无法读取未定义的属性“push”

Question

我目前正在尝试启动一个包含用户登录的 Vue 应用程序。由于某种原因，我一直在努力让这个路由器重定向工作。

该实现直接来自 vueschool 页面，专门针对组合 API。

我在这里缺少什么？

每次我运行注册脚本时，它都会正确注册用户并记录错误，指出找不到未定义的“推送”属性。我的代码完成告诉我它就在那里，linting 工作正常并且 IDE Webstorm 没有给出任何错误。

<script>
import firebase from "firebase/app";
import "firebase/auth";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Register",
  setup() {
    const form = ref({
      email: "",
      password: "",
      error: "",
    });

const pressed = () => {
  const user = firebase
    .auth()
    .createUserWithEmailAndPassword(form.value.email, form.value.password);

  user
    .then((user) => {
      console.log(user);
      const router = useRouter();
      router.push("/about");
    })
    .catch((e) => console.log(e.message));
};

    return {
      form,
      pressed,
    };
  },
});
</script>

希望这只是简单的事情

Answer 1

const router = useRouter();必须在设置挂钩的范围内声明，而不是在任何内部范围内：

setup(){

   const router = useRouter();

    const form = ref({
      email: "",
      password: "",
      error: "",
    });

const pressed = () => {
  const user = firebase
    .auth()
    .createUserWithEmailAndPassword(form.value.email, form.value.password);

  user
    .then((user) => {
      console.log(user);
     
      router.push("/about");
    })
    .catch((e) => console.log(e.message));
};

    return {
      form,
      pressed,
    };
  },