javascript页面跳转传递参数

在JavaScript中，页面跳转并传递参数通常有两种常见的方法：

1. **URL查询参数**：
- 使用`window.location.href`，可以在URL后面附加一个问号`?`，然后跟着键值对，例如 `location.href = "targetPage.html?key=value"`。参数会被编码并在地址栏中显示。

2. **POST请求** (适用于复杂数据)：
- 当需要发送大量数据或者不想将信息暴露在URL中时，可以使用`XMLHttpRequest` 或者 `fetch()` 来发起一个POST请求，设置`FormData` 或者 `JSON.stringify` 的数据。示例：

     const params = { key: 'value' };
     fetch('targetPage.php', {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: new URLSearchParams(params),
     }).then(response => response.text());

这种方式需要后端接收并解析请求。

相关问题

javascript使用cookie实现页面跳转传递参数

在JavaScript中，Cookie是一种小型文本文件，通常存储在用户的浏览器上，用于持久地跟踪用户信息。如果你想通过Cookie传递参数来进行页面跳转，可以按照以下步骤操作：

1. **创建Cookie**:
使用`document.cookie`属性设置Cookie值。例如，要存储键值对`username=John`，你可以这样做：

   document.cookie = "username=John; expires=expiryDate; path=/";

`expires`指定了Cookie的有效期，`path`则指定Cookie应用的URL路径。

2. **设置跳转链接**:
在页面跳转前，先检查是否有存储的Cookie，如果有，将参数添加到URL查询字符串中：

   function setRedirect() {
     const usernameFromCookie = getCookie('username'); // 获取Cookie值
     if (usernameFromCookie) {
       window.location.href = 'targetPage?param=' + encodeURIComponent(usernameFromCookie);
     } else {
       window.location.href = 'targetPage'; // 如果没有Cookie，则直接跳转
     }
   }

   // 辅助函数获取Cookie
   function getCookie(name) {
     const cookies = document.cookie.split(';');
     for (let cookie of cookies) {
       let parts = cookie.trim().split('=');
       if (parts[0] === name) {
         return decodeURIComponent(parts[1]);
       }
     }
     return null;
   }

3. **接收并处理参数**:
目标页面可以通过`URLSearchParams`对象或者查询字符串解码来获取参数：

   function handleRedirect() {
     const params = new URLSearchParams(window.location.search);
     const param = params.get('param'); // 取得传递的参数
     console.log('Received parameter:', param);
     // ...然后在这里处理参数
   }
   document.addEventListener('DOMContentLoaded', handleRedirect);

vue页面跳转传递参数

可以使用路由传参来实现。在跳转时可以通过路由的params或query属性传递参数，如下示例：

// 在路由中定义参数
{
  path: '/user/:id',
  name: 'user',
  component: User
}

// 在代码中跳转并传递参数
this.$router.push({
  name: 'user',
  params: { id: userId }
})

// 在组件内通过$route对象获取参数
this.$route.params.id // userId

另外也可以通过Vuex来进行数据的跨组件传递。