CODEWITHSUNDEEP
typescriptvue.jsvue-router
TinyTiger
TinyTiger

Reputation: 2053

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

I am using Vue 3 + Vue Router 4 + TypeScript.

And I'm trying to use router.push() but I keep getting a console error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push').

What am I doing wrong?

UPDATE: If I run console.log(router); it returns undefined. Therefore I assume this is the problem, but why is that happening and how to solve it?

Here is my router/index.ts code:

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;

And here is the Vue file where the error router.push() error is generated from. I have tried using a named route and a path, both give the same error:

<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>

Upvotes: 5

Views: 14532

Answers (1)

TinyTiger
TinyTiger

Reputation: 2053

Figured it out.

The const router = useRouter(); line needs to be outside the enterChat function. For some reason you cannot create the router instance inside the same function you wish to use it.

So it should be like this:

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

And not like this:

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

Here is the full updated file for reference:

<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>

Upvotes: 14

Related Questions