I am currently developing a Quasar application powered by Vue 3 with vue-router version 4
All my routes are properly configured and function well when navigating from a component template using
<router-link to="/route">Go to route</router-link>
However, I am struggling to access the router and route objects within my methods. As per the documentation, I should be able to retrieve the router object using this.$router or router, but I am unable to do so.
The structure of my single file component is similar to the following:
<template>
<q-page>
<q-card>
<q-form @submit="handleSubmit()" > ;
<q-input v-model="param" />
<q-btn label="submit" type="submit" />
</q-form>
<router-link to="/">Go to Foo</router-link> <!-- This works perfectly -->
</q-card>
</q-page>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup () {
const param = ref(null);
return { param }
},
methods: {
async handleSubmit () {
// Perform actions
// Navigate to another route
}
}
}
</script>
Is there a way for me to access the vue router from the handleSubmit method?
this.$route and this.$router are returning as undefined. It seems that with Vue 3 and Single File Components, this approach does not work. For instance, with the store, I need to use Vuex's mapState and mapActions.