vue如何获取当前页面的url

最新推荐文章于 2025-06-12 16:08:43 发布

小爱同学-Allen

最新推荐文章于 2025-06-12 16:08:43 发布

阅读量3.4w

点赞数 17

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_34595425/article/details/122503958

1关于window.location的详解：
window.location 对象不仅可以获得当前页面的地址 (URL)，还能够将浏览器重定向到新的页面。

下面，以http://www.baidu.com:8080/test?id=123为例来进行解释：

获取方式：
1）window.location

   1. window.location.href （当前url）—— http://www.baidu.com:8080/test?id=123

　　2. window.location.protocol（协议）—— http:

　　3. window.location.host（域名 + 端口）—— www.baidu.com:8080
　　
　　4. window.location.hostname（域名）—— www.baidu.com

　　5. window.location.port（端口）—— 8080

　　6. window.location.pathname（路径）—— /test

　　7. window.location.search （请求的参数）—— ?id=123

　　8. window.location.origin（路径前面的url）——  http://www.baidu.com:8080

2) this.$route.path—— /test

通过注入路由，我们可以在任何组件内通过 this. $r o u t e r 访问路由器，也可以通过 t h i s .$ route 访问当前的路由。
this. $r o u t e r 与 t h i s .$ route 两者相差一个 r 但是差距蛮大的
可以理解为：

this.$router 相当于一个全局的路由对象，包含路由相关的属性、对象 (如 history 对象) 和方法，在任何页面都可以通过 this.$router 调用其方法如 push() 、go() 、resolve() 等。
this.$route 表示当前的路由对象。每一个路由都有一个 route 对象，它是一个局部的对象，可以获取当前路由对应的 name , params, path , query 等属性。

this.$route 在这里插入图片描述