在 vue3 / quasar2 中访问 $route

Posted 2023-05-06

【中文标题】在 vue3 / quasar2 中访问 $route

【英文标题】：access to $route in vue3 / quasar2

【发布时间】：2021-12-14 10:56:22

【问题描述】：

我正在使用带有 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,
    
  ,

;

每次我在设置中使用它时都会遇到相同的错误。

所以一定有一些我没有得到的东西。你能帮帮我吗？

【参考方案1】：

我认为你在 Level.vue 中寻找https://v3.vuejs.org/guide/composition-api-provide-inject.html#mutating-reactive-properties：

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
    )
  

【讨论】：

非常感谢@PalelPratik。第二个解决方案正是我想要的。