Question

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

2021-12-04

13559

typescript vue.js vue-router

我正在使用 Vue 3 + Vue Router 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 函数之外。出于某种原因，您无法在想要使用的同一函数内创建 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>