access to $route in vue3 / quasar2

Question

我正在使用类星体与API组成，我有一个问题。

我只是想从当前路由中获取参数所以在onMounted中，我尝试使用this.$route.params，但我总是得到"这是未定义的">在控制台。

// 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,
}
},
};

我每次在设置中使用这个都得到相同的错误。

所以一定有什么我没有得到的。你能帮帮我吗?

Answer 1

我想你正在寻找https://v3.vuejs.org/guide/composition-api-provide-inject.html#mutating-reactive-properties在你的Level.vue:

import { provide } from 'vue';
export default {
setup() {
provide('appName', 'vue3')
}
} 

然后在任何你想要访问这个变量的子组件中，注入它:

import { inject } from 'vue'
export default {
setup() {
const appName = inject('appName');
}
}

或

import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
onMounted(() => {
const id = route.params.id
})
}
}