- 作者:老汪软件技巧
- 发表时间:2024-01-04 18:00
- 浏览量:
原生:
背景 : .,但返回的是一个?xxx=aa&yyy=bb 这种形式,并不能供我们正常调用,通常我们可能会用正则进行进一步截取,
快速获取当前页面的参数 : 方法一:
location.href = 'http://www.baidu.com?ddd=1&fff=2'
const querySearch = location.search // ?ddd=1&fff=2
const queryParams = new URLSearchParams(querySearch) // 得到URLSearchParams解析对象
const result = Object.fromEntries(queryParams.entries()) // { ddd: 1, fff: 2 }
方法二:
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
console.log(params) // 得到一个Proxy对象
console.log(params.ddd) // 1
封装成一个hook
const useParams = (urlSearch?) => {
const params = useRef(
new Proxy(new URLSearchParams(urlSearch || window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
})
);
return params.current
}
Umi:
钩子函数返回动态路由的匹配参数键值对对象;子路由中会集成父路由的动态参数。
import { useParams } from 'umi';
// 假设有路由配置 user/:uId/repo/:rId
// 当前路径 user/abc/repo/def
const params = useParams()
/* params
{ uId: 'abc', rId: 'def'}
*/
跳转/获取路由 :
import { history,history } from 'umi';
// 正确的在组件或页面中执行路由导航
const handleClick = () => {
history.push('/app-settings/popular', { data: '这是一些状态数据' });
};
// 通过 history.location.query 获取
if (history.location.query?.id || history.location.query?.draftId)
获取路由参数:
const state: any = useLocation().state // 获取上面方法的数据