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