js页面跳转传参怎么写
时间: 2024-02-05 18:02:45 浏览: 35
可以使用URL参数来在JavaScript和页面之间传递数据。在跳转到另一个页面时,可以将参数添加到URL中,然后在目标页面中使用JavaScript获取这些参数。下面是传递参数的示例代码:
在当前页面中:
```javascript
var param1 = 'hello';
var param2 = 'world';
window.location.href = 'target_page.html?param1=' + param1 + '¶m2=' + param2;
```
在目标页面中:
```javascript
var urlParams = new URLSearchParams(window.location.search);
var param1 = urlParams.get('param1');
var param2 = urlParams.get('param2');
console.log(param1); // 输出 'hello'
console.log(param2); // 输出 'world'
```
以上代码首先从当前页面获取参数并将它们添加到目标页面的URL中,然后在目标页面中使用`URLSearchParams`对象获取参数并将它们存储在变量中。
相关问题
layui页面跳转传参
在 layui中,可以通过两种方式实现页面跳转传参:
1. 使用URL传参
可以在跳转页面时在URL后面拼接参数,例如:
```js
// 跳转到user.html页面,并传递参数id=123
location.href = 'user.html?id=123';
```
在接收参数的页面,可以通过获取URL中的参数来获取传递的值,例如:
```js
// 获取URL中的参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
}
// 获取id参数的值
var id = getQueryString('id');
```
2. 使用sessionStorage传参
可以在跳转页面前,将参数存储到sessionStorage中,跳转到目标页面后再获取参数,例如:
```js
// 存储参数到sessionStorage中
sessionStorage.setItem('id', '123');
// 跳转到user.html页面
location.href = 'user.html';
// 在user.html页面获取参数
var id = sessionStorage.getItem('id');
```
需要注意的是,sessionStorage中存储的数据只能在同一个浏览器窗口中共享,如果需要在不同的浏览器窗口中共享数据,可以考虑使用localStorage。
vue 如何接受页面跳转传参
Vue 接受页面跳转传参有以下两种方法:
1. 通过路由传参
在路由设置中,可以在路由路径后面加上参数,例如:/user/:userId。这样在组件内就可以通过 $route.params.userId 来获取该参数的值。
示例代码:
```javascript
// 路由设置
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
component: User
}
]
})
// 组件内获取参数
export default {
mounted() {
const userId = this.$route.params.userId
console.log(userId)
}
}
```
2. 通过 props 传参
在路由设置中,可以将参数作为组件的 props 传入。
示例代码:
```javascript
// 路由设置
const router = new VueRouter({
routes: [
{
path: '/user',
component: User,
props: { userId: '123' }
}
]
})
// 组件内声明 props
export default {
props: ['userId'],
mounted() {
console.log(this.userId)
}
}
```
在这种方法中,传入的参数可以在组件内通过 props 进行声明和获取。在路由部分,可以直接在 props 中设置参数的值,也可以通过函数的方式动态传参。
以上两种方法都可以完成 Vue 接受页面跳转传参的需求,具体选择哪种方法,取决于具体的页面需求和逻辑。