本页目录
location引入属性params 与 query 的区别示例

location

@ray-js/ray 需 >=0.6.23 。

引入

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

属性

属性类型说明
pathnamestringURL 路径部分
searchstringURL 参数字符串
hrefstring页面全路径
queryRecord<string, string>URL 查询参数对象（? 后的参数）
paramsRecord<string, string>匹配表达式路由参数（如 /detail/:uid 中的 uid）
hashstringhash（web 特有）
hoststringURL 域名含端口（web 特有）
hostnamestringURL 域名（web 特有）
portstringURL 端口（web 特有）
protocolstringURL 协议（web 特有）

params 与 query 的区别

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

示例

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;