Vuejs 3 路由器无法读取未定义的属性 'push'

Question

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

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

我在这里错过了什么？

每次我运行注册脚本都会正确注册用户并记录无法找到未定义的 'push' 属性的错误。我的代码完成告诉我它在那里，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,
    };
  },

Vuejs 3 路由器无法读取未定义的属性 'push'

Vuejs 3 Router Cannot read property 'push' of undefined

vue.js

vue-router

vuejs3

vue-composition-api

vue-router4

Vuejs 3 路由器无法读取未定义的 属性 'push'

Vuejs 3 Router Cannot read property 'push' of undefined

vue.js

vue-router

vuejs3

vue-composition-api

vue-router4

Vuejs 3 路由器无法读取未定义的属性 'push'