vue获取当前访问url

vue yekong 127℃

在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

喜欢 (0)