VueJS 3 / Router / redirect with push : Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')

Question

G'day,

I wrote a script to login, and at the end of the script I would like to redirect to a new view (url: http://mywebsite/Home ) I have this script to login : (file : ./component/log.vue)

<script setup lang="ts">
import { computed, ref } from "vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import store from '../store/index';
import router from "vue-router";
import * as yup from "yup";


const schema = yup.object().shape({
  email: yup.string().required("Email obligatoire"),
  password: yup.string().required("Password obligatoire"),
});

const myStore: any = store;
const myRouter: any = router;
let loading: any = ref(false);
let message: any = ref('');

// fonction de login
const loggedIn = computed(() => myStore.state.auth.status.loggedIn);
if (loggedIn.value) {
  myRouter.push('../views/Home.vue');
}

// envoi des données pour se logger
const handleLogin = (user) => {
  loading = true;

  myStore.dispatch("auth/login", user).then(
    () => {
      myRouter.push('../views/Home.vue');
    },
    (error) => {
      loading = false;
      message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
    }
  );
}

</script>

but it look like there is an error on the "push" So I read the doc on : https://next.router.vuejs.org/ and try some things, but nothing works.

I have this error :

Log.vue?320d:36 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')
at setup (Log.vue?320d:36)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6701)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6310)
at setupComponent (runtime-core.esm-bundler.js?5c40:6266)
at mountComponent (runtime-core.esm-bundler.js?5c40:4119)
at processComponent (runtime-core.esm-bundler.js?5c40:4094)
at patch (runtime-core.esm-bundler.js?5c40:3689)
at mountChildren (runtime-core.esm-bundler.js?5c40:3885)
at mountElement (runtime-core.esm-bundler.js?5c40:3794)
at processElement (runtime-core.esm-bundler.js?5c40:3766)

Can you tel me why ?

I use the new version, so : Vue 3 with TS , Router V4, etc.

Thank for your help.

Answer 1

If anyone else has the same problem, I found the solution:

You have to import:

import { useRouter } from 'vue-router'

And then:

myRouter = useRouter();

That's all.

So the final code is:

<script setup lang="ts">
import { computed, ref } from "vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import store from '../store/index';
import { useRouter } from "vue-router";
import * as yup from "yup";


const schema = yup.object().shape({
  email: yup.string().required("Email obligatoire"),
  password: yup.string().required("Password obligatoire"),
});

const myStore: any = store;
const myRouter: any = useRouter();
let loading: any = ref(false);
let message: any = ref('');

// fonction de login
const loggedIn = computed(() => myStore.state.auth.status.loggedIn);
if (loggedIn.value) {
  myRouter.push('/Home');
}

// envoi des données pour se logger
const handleLogin = (user) => {
  loading = true;

  myStore.dispatch("auth/login", user).then(
    () => {
      myRouter.push('/Home');
    },
    (error) => {
      loading = false;
      message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
    }
  );
}

</script>