Using this.$router not working

Hi,

I’m using this code to navigate to another page but it doesn’t work because of TypeScript, it gives this error:

Property '$router' does not exist on type '{ openPage(p: object): void; }'.

Code:

<script lang="ts">
  methods: {
    openPage(p: object) {
      this.$router.push(p.path)
    }
  }

If I remove …

lang="ts">

… it works fine. Is there a specific issue with TypeScript not detecting this as a feature of Vue?

Thank you.

Hmmm, I’m testing this out now, and it seems to work fine for me.

Can you recreate the error in a sample git repo and share that?

Got the same. I do it like this

setup() {
  const router = useRouter();
  const openPage = function(){
    router.push();
  }
  return { ..., openPage}
}

you are not using the “options” approach for composing your component… which is what @geodeveloper is doing. So this is another approach that would work, but it is not what the question is.

This is the full code / context:

<template>
  <ion-grid>
    <ion-row>
      <ion-col size="6" v-for="p in publications" :key="p.id">
        <img :src="p.img" @click="openPage(p)">
      </ion-col>
    </ion-row>
  </ion-grid>
</template>

<script lang="ts">
import {IonCol, IonGrid, IonRow} from '@ionic/vue';
import {useRouter} from 'vue-router';
import store from './../store'

export default {
  components: {IonCol, IonGrid, IonRow},
  setup() {

    store.setPublications([
      {id: 1, img: 'https://picsum.photos/200?random=1', url: '/publication/1', code: 'CODE1'},
      {id: 2, img: 'https://picsum.photos/200?random=2', url: '/publication/2', code: 'CODE2'},
    ]);

    const router = useRouter();

    return {
      router,
    };
  },
  data() {
    return {
      publications: store.state.publications
    }
  },
  methods: {
    openPage(p: object) {
      this.$router.push(p.url)
    }
  }
}
</script>

<style scoped>

ion-col img {
  width: 100%;
  height: 200px;
}

</style>

I still get the error:

what do you mean? I can’t see any difference from my app :thinking:

What about wrap image inside ion-item with router-link or href property?

Hi guys,

I solved the issue. It was failing because I was not using:

export default defineComponent({

Thank you all for your replies.

2 Likes