Vue3/Quasar2组合式API中访问$route获取路由参数报错如何解决

问题根源 #

Vue3 组合式API的setup函数执行时机早于组件实例初始化，因此不存在选项式API里的this组件实例上下文，所有原本通过this访问的实例属性都需要改用对应的组合式API钩子获取。

解决方案 #

使用Vue Router提供的useRoute组合式钩子获取当前路由实例，具体修改步骤如下：

• 首先从vue-router中导入useRoute钩子
• 在setup函数内调用useRoute获取当前路由对象
• 替换原本的this.$route调用为实例化得到的路由对象

修正后的完整代码如下：

// src/pages/Level.vue
import { ref, onMounted, computed } from "vue";
import { useStore } from 'vuex'
import { useQuasar } from 'quasar';
// 新增导入useRoute钩子
import { useRoute } from 'vue-router'

export default {
  name: "LevelPage",
  setup () {
    const $q = useQuasar();
    const $store = useStore();
    // 实例化获取当前路由对象
    const route = useRoute();
    const level = ref(null);

    onMounted(()=> {
      // 替换this.$route为实例化得到的route对象
      console.log(route.params)
    });

    return {
      level,
    }
  },
};

补充说明 #

如果后续需要处理同组件路由参数动态更新的场景，可以直接用watch侦听route.params的对应属性，无需额外绑定路由全局事件。

内容的提问来源于stack exchange，提问作者Worksfather