使用wlocation对象window根据你的需求选择合适的方法吧
一、使用window.location对象
直接用JavaScript的window.location对象，就能拿到当前页面的URL信息。这就像直接看网页地址栏一样简单。
| 属性 | 描述 |
|---|---|
| href | 获取完整的URL |
| protocol | 获取协议部分（如http或https） |
| hostname | 获取主机名（包括端口） |
| pathname | 获取路径部分 |
| search | 获取查询参数部分 |
| hash | 获取锚点（hash）部分 |
示例代码：
console.log(window.location.href); // 输出完整的URL console.log(window.location.protocol); // 输出协议 console.log(window.location.hostname); // 输出主机名 console.log(window.location.pathname); // 输出路径 console.log(window.location.search); // 输出查询参数 console.log(window.location.hash); // 输出锚点 二、利用Vue Router的$route对象
如果你在Vue项目中使用了Vue Router，那么你可以通过$route对象来获取当前路由的信息，这比直接操作window.location要方便多了。
| 属性 | 描述 |
|---|---|
| path | 当前路由的路径 |
| params | 路由参数对象 |
| query | 查询参数对象 |
| hash | 路由的hash部分 |
| fullPath | 完整的路由路径 |
| name | 当前路由的名称 |
示例代码：
console.log(this.$route.path); // 输出当前路由的路径 console.log(this.$route.params); // 输出路由参数对象 console.log(this.$route.query); // 输出查询参数对象 console.log(this.$route.hash); // 输出路由的hash部分 console.log(this.$route.fullPath); // 输出完整路由路径 console.log(this.$route.name); // 输出当前路由的名称 三、使用第三方库解析URL
如果你需要更复杂的URL处理，比如解析查询参数，可以使用第三方库如qs来帮助你。
你需要安装库：
npm install qs --save 然后在代码中使用：
const qs = require('qs'); const params = qs.parse(window.location.search); console.log(params); // 输出查询参数对象 在Vue.js中获取URL信息的方法主要有三种：使用window.location对象、利用Vue Router的$route对象、使用第三方库如qs解析URL。根据你的需求选择合适的方法吧！
如果只是简单地获取URL信息，window.location就足够了；如果使用了Vue Router，$route对象会更加方便；而对于复杂的URL解析，第三方库则更加灵活和强大。
记得根据应用的具体需求和复杂程度，选择最适合的方式来获取和处理URL信息。如果应用中频繁需要操作URL，建议封装相关方法，提高代码的可维护性和复用性。
相关问答FAQs
1. 如何在Vue中获取当前页面的URL？
你可以通过window.location.href来获取当前页面的URL。
console.log(window.location.href); // 输出当前页面的URL 2. 如何在Vue中获取URL的查询参数？
使用qs库可以轻松获取查询参数。
const qs = require('qs'); const params = qs.parse(window.location.search); console.log(params); // 输出查询参数对象 3. 如何在Vue中获取URL的路由参数？
如果你正在使用Vue的路由功能，你可以通过$route.params来获取URL的路由参数。
console.log(this.$route.params); // 输出路由参数对象