在 vue 3 / quasar 2 中访问 $route

Question

我正在使用具有 API 合成的 Quasar，但我遇到了问题。

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

// 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
    })
  }
}

在 vue 3 / quasar 2 中访问 $route

access to $route in vue3 / quasar2

quasar

quasar-framework