是否可以从VueJS中的路由获取完整的url（包括来源）？

Question

在此示例中：

const resolved = this.$router.resolve({
  name: 'about'
})

console.log(resolved.route.path)

是否可以获取包含始发地的路线？就像，如果网址是

site.com/about

，代码会给出

/about

，所以我需要自己附加原点：

window.location.origin + resolved.route.path

。

Answer 1

我一直在使用这个（使用 vue-router v4 进行测试，仅浏览器）：

const route = router.resolve({ /* your route here */ });
const absoluteURL = new URL(route.href, window.location.origin).href;

编辑：使用

location.origin

代替

location.href

，因为

resolve().href

已经包含

base

。

Answer 2

不，不是来自路由器。

甚至路由器的

base

属性也是相对于应用程序根目录的：

应用程序的基本 URL。例如，如果整个单页应用程序在 /app/ 下提供服务，则 base 应使用值“/app/”。

$route.fullPath

也从应用程序根目录开始。文档将其描述为：

完整解析的 URL，包括查询和哈希。

Answer 3

之前的回复省略了

pathname

。如果页面部署在

/app/

上并且在路由器中使用

hash

模式，则需要这个。

顺便说一句，以下代码应该适用于所有情况。

const route = router.resolve({ /* your route here */ });
const absoluteURL = new URL(route.href, window.location.origin + window.location.pathname).href;