vue3 开发阶段 通过路由 获取 .vue文件绝对路径

在 Vue 3 的开发阶段，你可以通过路由来获取 .vue 文件的绝对路径。这可以通过使用 Vue Router 的 `currentRoute` 对象和 `matched` 属性来实现。

首先，确保你已经安装了 Vue Router，并在你的项目中进行了配置。然后，在你的组件中，可以通过 `this.$router.currentRoute.matched` 来获取匹配当前路由的路由记录数组。每个路由记录对象都包含一个 `components` 属性，其中包含了与该路由对应的组件。

假设你有一个名为 `MyComponent.vue` 的组件文件，并且你想要获取它的绝对路径。在组件中，你可以通过以下代码来获取它的绝对路径：

const matchedComponents = this.$router.currentRoute.matched;

for (const routeRecord of matchedComponents) {
  if (routeRecord.components.default === MyComponent) {
    const componentPath = new URL(routeRecord.components.default.__file, window.location.origin).href;
    console.log(componentPath);
    break;
  }
}

上述代码会遍历当前路由匹配到的路由记录数组，并找到与 `MyComponent` 相对应的路由记录。然后，使用 `__file` 属性获取组件文件的相对路径，并使用 `URL` 构造函数将其转换为绝对路径。

请注意，上述方法仅适用于开发阶段，因为在生产构建中，.vue 文件会被打包成 JavaScript 代码，无法直接获取到其绝对路径。此外，如果你在构建工具（如 webpack）中使用了模块解析器（如 Babel）来处理 .vue 文件，那么该方法可能不适用，因为在转换过程中，.vue 文件可能会被拆分成多个部分。

因此，在实际开发中，更常见的做法是使用别名或相对路径来引用 .vue 文件，而不是直接获取其绝对路径。希望这能帮到你！