两个不同前端页面传参
时间: 2023-07-01 08:27:54 浏览: 70
在前端页面传参的方式可以有多种,以下是两种不同的方式:
1. 查询字符串传参
在 URL 后面添加查询字符串的方式传参,例如:
```javascript
// 页面 A
const params = { id: 123, name: 'Alice' };
window.location.href = `/pageB.html?id=${params.id}&name=${params.name}`;
// 页面 B
const search = window.location.search;
const params = new URLSearchParams(search);
const id = params.get('id');
const name = params.get('name');
console.log(id, name); // 123, 'Alice'
```
在页面 A 中,我们将参数对象 `params` 转换成查询字符串,并将其添加到 URL 后面。在页面 B 中,我们通过 `window.location.search` 获取到查询字符串,然后使用 `URLSearchParams` 对象解析出其中的参数。
2. 使用路由传参
使用路由的方式传参,例如:
```javascript
// 页面 A
const params = { id: 123, name: 'Alice' };
window.location.href = `/pageB.html/${params.id}/${params.name}`;
// 页面 B
const id = window.location.pathname.split('/')[2];
const name = window.location.pathname.split('/')[3];
console.log(id, name); // 123, 'Alice'
```
在页面 A 中,我们将参数对象 `params` 转换成路由形式,并将其添加到 URL 后面。在页面 B 中,我们通过 `window.location.pathname` 获取到路由路径,并使用字符串分割方法获取其中的参数。