Vue 3 + Vue Router 4：TypeError：无法读取未定义的属性（读取“推送”）

Question

我正在使用 Vue 3 + Vue 路由器 4 + TypeScript。

而且我正在尝试使用router.push()但我不断收到控制台错误： Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') 。

我究竟做错了什么？

更新：如果我运行console.log(router); 它返回undefined 。 因此我认为这是问题所在，但为什么会发生这种情况以及如何解决呢？

这是我的router/index.ts代码：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Welcome",
    component: () =>
      import(/* webpackChunkName: "Welcome" */ "../views/Welcome.vue"),
  },
  {
    path: "/chatroom",
    name: "Chatroom",
    component: () =>
      import(/* webpackChunkName: "Chatroom" */ "../views/ChatRoom.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

这是生成错误router.push()错误的 Vue 文件。 我尝试使用命名路由和路径，都给出相同的错误：

<template>
  <div class="welcome container">
    <p>Welcome</p>
    <div v-if="showLogin">
      <LoginFormVue @loggedIn="enterChat" />
      <p>No account yet? <span @click="showLogin = false">Signup</span></p>
    </div>
    <div v-else>
      <SignUpFormVue @signedUp="enterChat" />
      <p>Alredy registered? <span @click="showLogin = true">Login</span></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SignUpFormVue from "@/components/SignUpForm.vue";
import LoginFormVue from "@/components/LoginForm.vue";
import { useRouter } from "vue-router";

const showLogin = ref(false);
const enterChat = () => {
  const router = useRouter();
  console.log(router); // <-- This returns undefined. Why??
  router.push({ name: "Chatroom" });
  //router.push("/chatroom"); <-- This also doesn't work, gives the same error
};
</script>

Answer 1

弄清楚了。

const router = useRouter(); 行需要在enterChat function 之外。 由于某种原因，您无法在您希望使用的同一 function 内创建router实例。

所以它应该是这样的：

const router = useRouter(); //<-- router declared outside function: CORRECT
const enterChat = () => {
  router.push({ name: "Chatroom" });
};

而不是这样：

const enterChat = () => {
  const router = useRouter();//<-- router declared inside function: INCORRECT
  router.push({ name: "Chatroom" });
};

这是完整的更新文件以供参考：

<template>
  <div class="welcome container">
    <p>Welcome</p>
    <div v-if="showLogin">
      <LoginFormVue @loggedIn="enterChat" />
      <p>No account yet? <span @click="showLogin = false">Signup</span></p>
    </div>
    <div v-else>
      <SignUpFormVue @signedUp="enterChat" />
      <p>Alredy registered? <span @click="showLogin = true">Login</span></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import SignUpFormVue from "@/components/SignUpForm.vue";
import LoginFormVue from "@/components/LoginForm.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const showLogin = ref(false);
const router = useRouter();
const enterChat = () => {
  console.log(router);
  router.push({ name: "Chatroom" });
};
</script>