vue等获取当前页面的url网址

Vue等获取当前页面URL方法

获取地址的方法

  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
### Vue2 中获取当前页面路由的方法 在 Vue2 中,可以通过 `this.$route` 获取当前页面的路由信息[^1]。该对象是一个局部路由对象,包含当前路由的详细信息,例如 `name`、`path`、`meta`、`params` 和 `query` 等属性。 以下是 `this.$route` 的常用属性及其说明: - **`this.$route.name`**:获取当前路由的名称。 - **`this.$route.path`**:获取当前路由的路径。 - **`this.$route.query`**:获取 URL 查询参数,返回一个对象,例如 `{ key: value }`。 - **`this.$route.params`**:获取动态路由参数,返回一个对象。 - **`this.$route.meta`**:获取路由元信息,通常用于设置标题或权限控制。 以下是一个示例代码,展示如何使用 `this.$route` 获取当前路由信息: ```javascript // 假设当前路由为 /trading?name=example&xzqid=123 if (this.$route.query.xzqid) { this.dataArea = this.$route.query.xzqid; // 获取查询参数 xzqid } if (this.$route.query.name) { this.name = this.$route.query.name; // 获取查询参数 name } console.log(this.$route.path); // 输出当前路径,例如 /trading console.log(this.$route.name); // 输出当前路由名称 ``` 此外,Vue Router 提供了全局挂载的路由实例 `this.$router`,可以用于导航操作,例如跳转页面或前进后退[^2]。例如: - **`this.$router.push(path)`**:导航到指定路径。 - **`this.$router.go(n)`**:在历史记录中前进或后退 n 步。 示例代码如下: ```javascript // 跳转到新页面 this.$router.push('/new-page'); // 前进一步 this.$router.go(1); // 后退一步 this.$router.go(-1); ``` 需要注意的是,`this.$route` 是一个只读对象,不能直接修改其值。如果需要改变路由信息,应通过 `this.$router.push()` 或其他导航方法实现[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值