---
title: location - 页面路由信息, 获取当前页面 URL 参数、路由匹配参数
---

## location

> @ray-js/ray 需 `>=0.6.23` 。

### 引入

```js
import { location } from '@ray-js/ray';
```

### 属性

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| pathname | string | URL 路径部分 |
| search | string | URL 参数字符串 |
| href | string | 页面全路径 |
| query | Record\<string, string\> | URL 查询参数对象（`?` 后的参数） |
| params | Record\<string, string\> | 匹配表达式路由参数（如 `/detail/:uid` 中的 `uid`） |
| hash | string | hash（web 特有） |
| host | string | URL 域名含端口（web 特有） |
| hostname | string | URL 域名（web 特有） |
| port | string | URL 端口（web 特有） |
| protocol | string | URL 协议（web 特有） |

### params 与 query 的区别

- **params**：从路由表达式中匹配的参数。例如路由配置为 `/detail/:uid`，跳转 `/detail/1234` 后，`location.params.uid` 为 `'1234'`。
- **query**：从 URL `?` 后的查询字符串解析的参数。例如跳转 `/detail/1234?name=tuya` 后，`location.query.name` 为 `'tuya'`。

### 示例

```tsx
import { View } from '@ray-js/ray';
import { location } from '@ray-js/ray';

// routers.config.ts 中路由配置为:
// { route: '/detail/:uid', path: '/pages/detail/index' }

// 假设跳转: router.push('/detail/1234?name=tuya')

function DetailPage() {
  // 通过 params 获取路由表达式参数
  const uid = location.params.uid; // '1234'

  // 通过 query 获取 URL 查询参数
  const name = location.query.name; // 'tuya'

  return (
    <View>
      <View>uid: {uid}</View>
      <View>name: {name}</View>
    </View>
  );
}

export default DetailPage;
```