是否可以在组件之外使用 route.meta 属性？答案

【问题标题】：Is it possible to use route.meta property outside of the component?是否可以在组件之外使用 route.meta 属性？
【发布时间】：2021-05-01 00:00:51
【问题描述】：

我在我的项目中使用 Vue 3，并且我在 Vue 组件中使用了 route.meta 属性，但是当我将它移到 .ts 文件中时，它不再起作用，并且浏览器内出现错误。

我的 .ts 文件：

import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();

export const myfunction = computed(() => {
  return route.meta.somedata;
});

来自浏览器的错误：

Uncaught (in promise) TypeError: Cannot read property 'meta' of undefined

相同的代码在 .vue 文件中运行良好。有没有办法在 .vue 文件之外使用元属性？

【问题讨论】：

如果您已经在一个文件中单独定义了路由器，那么您可以直接从该文件中导入路由器并使用它。
@YashMaheshwari 是的，我有 router/index.ts 文件我已经尝试导入它，但它将作为路由器导入，而不是路由器导入没有元属性的路由。

标签： javascript vue.js vue-component vue-router

【解决方案1】：

我找到了解决办法，首先需要导入路由器文件。

import router from "@/router/index";

然后使用路由器对象我们可以获取 currentRoute.value 然后访问元属性。

router.currentRoute.value.meta.someData

最终代码应如下所示：

import { computed } from "vue";
import router from "@/router/index";

export const myfunction = computed(() => {
  return router.currentRoute.value.meta.someData;
});

【讨论】：