在 Vue 中获取当前页面的 URL
Vue 是一款流行的前端框架，它提供了许多便捷的功能来开发现代化的Web应用程序。其中一个重要的功能是获取当前页面的URL，这对于许多应用程序来说都是必要的。本文将介绍如何在 Vue 中获取当前页面的URL，并提供一些示例来帮助您更好地理解。
一、使用window.location
获取当前页面的URL最简单的方法是使用JavaScript的window.location对象。window.location对象包含当前文档的URL，可以通过window.location.href属性访问。在Vue中，可以通过以下方式获取当前页面的URL：
let currentUrl = window.location.href;
这行代码将返回当前页面的URL，您可以将其存储在Vue组件的data属性中，以便在组件中使用。
二、使用Vue Router
Vue Router是Vue的官方路由器，它提供了一种更高级的方法来管理应用程序的路由。Vue Router可以轻松地获取当前路由的信息，包括当前页面的URL。在Vue Router中，可以通过以下方式获取当前页面的URL：
this.$router.currentRoute.path
该代码将返回当前路由的路径，您可以将其存储在Vue组件的data属性中，以便在组件中使用。
三、示例
以下是一个示例Vue组件，演示了如何使用window.location和Vue Router来获取当前页面的URL：
<template>
<div>
<p>当前页面的URL（使用window.location）：{{ currentUrl }}</p>
<p>当前页面的URL（使用Vue Router）：{{ currentRoute }}</p>
</div>
</template>
<script>
export default {
data() {
return {
currentUrl: "",
currentRoute: "",
};
},
mounted() {
// 使用window.location获取当前页面的URL
this.currentUrl = window.location.href;
// 使用Vue Router获取当前页面的URL
this.currentRoute = this.$router.currentRoute.path;
},
};
</script>
在上面的代码中，我们首先定义了一个data属性，用于存储当前页面的URL。然后，在组件的mounted生命周期钩子中，我们使用window.location和Vue Router分别获取当前页面的URL，并将其存储在data属性中。最后，我们在组件的模板中显示了这些URL。
四、总结
获取当前页面的URL是Vue应用程序中一个重要的功能。在本文中，我们介绍了两种获取当前页面URL的方法：使用JavaScript的window.location对象和Vue Router。我们还提供了一个示例Vue组件，演示了如何使用这些方法来获取当前页面的URL。希望这篇文章能帮助您更好地理解Vue中获取当前页面URL的方法。
