在Vue中获取当前访问的URL可以通过window.location
对象来实现。window.location
对象包含了有关当前URL的信息,如协议、主机名、路径等。以下是一些常用属性和方法:
window.location.href
:完整的URL字符串(即当前页面的完整路径)。window.location.protocol
:当前URL的协议,例如http:
或https:
。window.location.host
:当前URL的主机名,包括端口号(如果有)。window.location.hostname
:当前URL的主机名,不包括端口号。window.location.port
:当前URL的端口号。window.location.pathname
:当前URL的路径部分。window.location.search
:URL的查询字符串部分,以?
开头。window.location.hash
:URL的哈希部分,以#
开头。
例如,如果你想在Vue组件中获取并显示当前页面的完整URL,可以这样做:
<template>
<div>
当前URL是:{{ currentUrl }}
</div>
</template>
<script>
export default {
data() {
return {
currentUrl: window.location.href
};
}
}
</script>
这段代码会在组件的模板中显示当前页面的完整URL。
请注意,由于window.location
是Web API的一部分,而不是Vue特有的,所以这种方法在任何使用JavaScript的Web应用中都是通用的。此外,如果你的Vue应用使用了Vue Router并且想要获取当前路由的路径或参数,你可能需要使用Vue Router提供的this.$route
对象来获取,而不是直接使用window.location
。