如何在Quasar项目export default外部访问$route.name

报错原因 #

你在模块顶层作用域访问this时，ES模块默认运行在严格模式下，此时顶层this指向undefined，并非Vue组件实例，自然无法读取绑定在组件实例上的$route属性。$route仅可在组件上下文（包括组件选项、template模板、setup函数内部）中正常访问。

解决方案 #

使用Vue Router提供的组合式API useRoute，将metaData的定义移到setup函数内部即可获取当前路由对象。注意不要尝试在模块顶层直接调用useRoute，组合式API仅可在组件setup执行上下文、其他组合式函数内部调用。

修改后的可运行代码如下：

import { useMeta } from "quasar";
import { useRoute } from "vue-router";
// 如需路由切换时自动更新页面标题，额外导入computed
import { computed } from "vue";

export default {
  setup() {
    const route = useRoute();
    const metaData = {
      // 不需要响应路由变化时可以直接写 route.name
      // 需要动态更新标题请用computed包裹
      title: computed(() => route.name),
      titleTemplate: (title) => `${title}`,
    };
    useMeta(metaData);
  }
}

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