Vue 3 + Vue Router 4: TypeError: Cannot read properties of undefined (reading 'push')

Question

我正在使用 Vue 3 + Vue Router 4 + TypeScript。

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

我做错了什么？

更新： 如果我运行 console.log(router); 它 returns 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 函数之外。由于某些原因，您无法在您希望使用的同一函数内创建 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>

Vue 3 + Vue Router 4: TypeError: Cannot read properties of undefined (reading 'push')

Vue 3 + Vue Router 4: TypeError: Cannot read properties of undefined (reading 'push')

typescript

vue.js

vue-router