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

Posted 2023-03-13

【中文标题】Vue 3 + Vue Router 4：TypeError：无法读取未定义的属性（读取“推送”）

【英文标题】：Vue 3 + Vue Router 4: TypeError: Cannot read properties of undefined (reading 'push')

【发布时间】：2022-01-10 07:25:20

【问题描述】：

我正在使用 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>

【参考方案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>