access to $route in vue3 / quasar2 - quasar-framework

Question

I am using Quasar with API composition and I have an issue.
I just want to get parameters from the current route so within onMounted, I try to use this.$route.params, but I always get "this is undefined" in console.
// src/pages/Level.vue
import { ref, onMounted, computed } from "vue";
import { useStore } from 'vuex'
import { useQuasar } from 'quasar';
export default {
name: "LevelPage",
setup () {
const $q = useQuasar();
const $store = useStore();
const level = ref(null);
onMounted(()=> {
console.log(this.$route.params)
});
return {
level,
}
},
};
I get the same error every time I use this in the setup.
So there must be something I'm not getting. Can you please help me?

Answer 1

I think you are looking for https://v3.vuejs.org/guide/composition-api-provide-inject.html#mutating-reactive-properties In your Level.vue:
import { provide } from 'vue';
export default {
setup() {
provide('appName', 'vue3')
}
}
And then in any child component where you want to access this variable, inject it:
import { inject } from 'vue'
export default {
setup() {
const appName = inject('appName');
}
}
OR
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
onMounted(() => {
const id = route.params.id
})
}
}