vue获取网址的方法

在Vue开发中，有时候我们需要获取当前页面的网址信息，比如获取完整的URL地址、路径、查询参数等。下面将介绍几种常见的在Vue中获取网址的方法。

一、使用window.location对象

window.location对象提供了当前页面的URL相关信息。在Vue组件中，可以直接访问这个全局对象。

例如，要获取当前页面的完整URL，可以在Vue组件的方法中这样写：

<template>
  <div>
    <p>{{ fullUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullUrl: ''
    };
  },
  mounted() {
    this.fullUrl = window.location.href;
  }
};
</script>

除了href属性，window.location还有其他有用的属性，如pathname（获取路径）、search（获取查询参数）等。

二、通过Vue Router获取路径信息

如果你的Vue项目使用了Vue Router进行路由管理，那么可以通过this.$route来获取当前路由的信息。

比如，要获取当前路由的路径，可以这样做：

<template>
  <div>
    <p>{{ currentPath }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: ''
    };
  },
  mounted() {
    this.currentPath = this.$route.path;
  }
};
</script>

三、获取查询参数

当URL中包含查询参数时，我们可以通过this.$route.query来获取这些参数。例如，URL为http://example.com/page?name=John&age=25，在Vue组件中可以这样获取参数：

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    };
  },
  mounted() {
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
  }
};
</script>

通过以上几种方法，我们可以在Vue项目中方便地获取网址的各种信息，从而满足不同的业务需求。