页面跳转携带参数

父级页面跳转

              {
                "type": "dropdown-button",
                "label": "服务和环境",
                "buttons": [
                  {
                    "type": "button",
                    "label": "服务管理",
                    "onEvent": {
                      "click": {
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "url": "/project/project/service",
                              "params": {
                                "project_id": "${id}"
                              }
                            }
                          }
                        ]
                      }
                    },
                    "id": "u:ed81ff6d4113"
                  },
                  {
                    "type": "button",
                    "label": "环境管理",
                    "onEvent": {
                      "click": {
                        "actions": [
                          {
                            "ignoreError": false,
                            "actionType": "url",
                            "args": {
                              "url": "/project/project/environment",
                              "params": {
                                "project_id": "${id}"
                              }
                            }
                          }
                        ]
                      }
                    },
                    "id": "u:49f2fcafd1be"
                  }
                ],
                "id": "u:942c11d80448",
                "size": "sm"
              }

1. url 字段： 这里填的是 /project/project/service，表示页面路由路径。它通常对应前端定义的页面路径，而不是直接请求API接口。
2. params 字段：URL中的查询参数。
3. 跳转效果

• 当点击该按钮后，会拼接成如下的最终跳转 URL，例如： https://<host>/#/project/project/service?project_id=67f4ea712ad7f36affc0f3e1
• 其中 /project/project/service 是路径，project_id=67f4ea712ad7f36affc0f3e1 是通过 params 传递的参数。

在页面跳转时，后续操作携带从父级页面传过来的参数

当前页面是从父级页面跳转进来的，跳转时携带了参数，并且要保证后续的操作都要携带这个参数。

问题：从父级页面跳转进来时， 页面 url 上带了指定的参数，但是在页面后继发起新的请求，即重新加载页面就没有了。

如何处理

1. 将 project_id 存储在 session 中，后续的请求都在 session 中获取该参数

function(api, context) {
  // 获取当前页面的 URL 的哈希部分
  const hash = window.location.hash;

  // 检查是否存在查询字符串（以 '?' 开头）
  const queryStringIndex = hash.indexOf('?');
  let projectId = null;

  if (queryStringIndex !== -1) {
    // 提取查询字符串部分
    const queryString = hash.slice(queryStringIndex + 1);

    // 使用 URLSearchParams 解析提取的查询字符串
    const urlParams = new URLSearchParams(queryString);
    projectId = urlParams.get('project_id');

    if (projectId !== null) {
      window.projectId_ProjectEnvironment = projectId;
    }
  }

  // 直接从 window 对象读取
  if (projectId === null) {
    projectId = window.projectId_ProjectEnvironment || null;
  }

  console.log(projectId);

  if (projectId !== null) {
    console.log(api);
    api.url += '&project_id=' + projectId;
  };

  return api;
}

2. 尝试通过修改 window.location.hash 来更新 URL 的哈希部分

// 添加到 URL hash
if (projectId !== null && !hash.includes('project_id')) {
  console.log('xxxx');
  const newHash = hash.includes('?')
    ? `${hash}&project_id=${projectId}`
    : `${hash}?project_id=${projectId}`;

  console.log(newHash);
  window.location.hash = newHash;
}

这样的更新可能没有立刻反映到当前的页面状态中，尤其是在不同的上下文中执行此操作时。

3. 持久化数据解决方案(推荐)

刷新浏览器会导致页面的完全重新加载，这意味着 JavaScript 的执行环境会被重置。因此，所有通过 JavaScript 动态创建或修改并保存在内存中的数据（如你通过 window 绑定的变量）都将丢失。

具体来说：

1. *Window 对象绑定的变量*：

   • 这些变量只在当前页面加载期间存活，一旦页面刷新（无论是用户手动刷新、浏览器刷新按钮，还是通过 location.reload() 进行刷新），它们将会消失。

2. *持久化数据的解决方案*：

   例如，可以使用 localStorage 来存储 project_id：

function(api, context) {
  // 获取当前页面的 URL 的哈希部分
  const hash = window.location.hash;

  // 检查是否存在查询字符串（以 '?' 开头）
  const queryStringIndex = hash.indexOf('?');
  let projectId = null;

  if (queryStringIndex !== -1) {
    // 提取查询字符串部分
    const queryString = hash.slice(queryStringIndex + 1);

    // 使用 URLSearchParams 解析提取的查询字符串
    const urlParams = new URLSearchParams(queryString);
    projectId = urlParams.get('project_id');

    if (projectId !== null) {
      // window.projectId_ProjectEnvironment = projectId;
      localStorage.setItem('project_id@ProjectEnvironment', projectId);
    }
  }

  // 对象读取
  if (projectId === null) {
    // projectId = window.projectId_ProjectEnvironment || null;
    projectId = localStorage.getItem('project_id@ProjectEnvironment') || null;
  }

  console.log(projectId);

  if (projectId !== null) {
    console.log(api);
    api.url += '&project_id=' + projectId;
  };

  return api;
}