vue如何获取当前页面的url

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 . router 访问路由器,也可以通过 this. router访this.route 访问当前的路由。
this. r o u t e r 与 t h i s . router与this. routerthis.route 两者相差 一个 r 但是差距蛮大的
可以理解为:

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

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

  • 17
    点赞
  • 78
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值