两个不同的项目间页面的跳转总结

  最近在项目中碰到一个棘手的问题,我们的项目是用两种语言写的,其两者之间会有一些跳转的交互。我所面临的问题就是通过Java项目调到ruby项目,然后还能由ruby项目跳转到Java项目。第一次做这个有点不知所措。最后用了解决方案(PS:项目中session共享问题已经解决了)。

  第一种解决办法是在前端做控制,window.location.herf进行连接的跳转。但是这个只能操作当前的window,因为我们的项目中是Java页面作为一个iframe嵌套在ruby页面中。所以要变父页面的URL或者说就是整个页面的URL。总结一下:window.location.herf

  javascript中的location.href有很多种用法,主要如下。

1 self.location.href="/url" 当前页面打开URL页面
2 location.href="/url" 当前页面打开URL页面
3 windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。
4 this.location.href="/url" 当前页面打开URL页面
5 parent.location.href="/url" 在父页面打开新页面
6 top.location.href="/url" 在顶层页面打开新页面

  如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

  此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据.

  最重要的是window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

  "window.location.href"、"location.href"是本页面跳转
  "parent.location.href"是上一层页面跳转
  "top.location.href"是最外层的页面跳转

  举例说明:

  如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写

  "window.location.href"、"location.href":D页面跳转
  "parent.location.href":C页面跳转
  "top.location.href":A页面跳转

  如果D页面中有form的话,

  <form>: form提交后D页面跳转
  <form target="_blank">: form提交后弹出新页面
  <form target="_parent">: form提交后C页面跳转
  <form target="_top"> : form提交后A页面跳转
 
  关于页面刷新,D 页面中这样写:

  "parent.location.reload();": C页面刷新 (当然,也可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); )

  "top.location.reload();": A页面刷新

  第二种是在后端重定向到指定的URL,后端我们是使用springMVC,直接可以写URL来实现跳转,代码如下:

1 @RequestMapping("redirect/{agentPartyId}/{flag}")  
2     public String redirect(@PathVariable String agentPartyId, @PathVariable String flag){
3         PropertyPlaceholderConfigurer bean = SpringContext.getBean(PROPERTY_CONFIG_BEAN);
4         Properties pros = bean.getProperties();
5         String rubyServerUrl = pros.getProperty(RUBY_SERVER_URL);
6         String url = rubyServerUrl + "/integration/t0?ext=/apply/"+agentPartyId+flag;
7         logger.info("apply redirect url={}", url);
8         return "redirect:" + url;
9     }

  大致想到的两种解决方案就是这样。

 

<think>好的,我现在需要回答用户关于在两个Vue2项目页面跳转传参的问题。首先,我需要理清楚用户的具体需求。Vue2项目的传参,通常指的是不同部署环境或不同域下的项目,因为如果是同一个项目内的组件跳转,直接使用Vue Router就可以了。但跨项目的话,情况就不同了。 首先,我应该回顾一下常见的跨页面传参方法,尤其是适用于不同域或不同项目的情况。常见的方案可能有URL参数、本地存储(如localStorage)、Cookie,或者使用postMessage进行跨窗口通信,以及服务端中存储等。 接下来,我需要逐一分析这些方法的适用场景、实现步骤以及注意事项。例如,URL参数适合传递简单的数据,但数据量大的话会有长度限制,并且参数暴露在地址栏中可能不安全。localStorage和Cookie可以在同一浏览器的不同标签页或窗口共享数据,但需要同源策略的限制,如果是不同域的话,可能会遇到问题。postMessage允许跨域通信,但需要窗口的引用,比如通过window.open或iframe打开的子窗口,这样可能比较复杂。服务端中存储则需要后端配合,可能会增加复杂度,但安全性较好。 然后,我需要考虑用户可能的场景。比如,用户可能是在两个独立的Vue2应用之跳转,比如从应用A跳转到应用B的某个页面,并传递一些参数。这种情况下,两个应用可能部署在不同的域名下,或者同一域名的不同路径下。需要根据不同的部署情况选择合适的方法。 对于URL参数的方式,实现起来最简单。例如,应用A通过window.location.href跳转到应用B的页面时,将参数拼接在URL的查询字符串中。应用B在created或mounted钩子中,通过this.$route.query获取参数。但需要注意参数的安全性,敏感信息不应该通过URL传递,且URL有长度限制。 如果参数较大或敏感,可以考虑使用localStorage。应用A在跳转前将数据存入localStorage,应用B在页面加载时读取。但需要注意,localStorage受同源策略限制,如果两个项目不同源,这种方法不可行。此时可能需要通过中页面或使用postMessage。 当两个项目不同源时,postMessage可能是一个选择。应用A打开应用B的窗口,并通过postMessage发送数据。应用B监听message事件来接收数据。但这种方法需要处理窗口之的引用关系,比如应用A需要保持对应用B窗口的引用,以便发送消息。此外,需要正确设置targetOrigin,确保消息发送到正确的域,避免安全风险。 另外,Cookie也是一种可能,但同样受域名限制。如果两个项目在同一个主域下,可以设置domain为顶级域,例如.example.com,这样子域之可以共享Cookie。但如果是完全不同的域,这种方法也不可行。 服务端中存储的话,比如应用A将数据提交到服务端,生成一个唯一的token,然后将token作为URL参数传递给应用B。应用B通过token向服务端请求数据。这种方法需要服务端的支持,但安全性较好,适合传递敏感或大量数据。 接下来,我需要考虑这些方法在Vue2中的具体实现步骤。例如,使用URL参数时,如何在跳转时拼接参数,如何在目标页面获取参数。使用localStorage时,如何设置和读取数据,以及如何确保在页面加载时数据可用。使用postMessage时,如何正确建立窗口的通信,如何处理异步消息接收等。 还需要提醒用户注意安全性问题,比如防止XSS攻击,尤其是在使用localStorage或postMessage时,要确保数据的来源可信,避免恶意脚本窃取数据。另外,跨域通信时需要正确处理跨域问题,设置适当的CORS头。 可能用户会问到不同域的情况下哪种方法最合适,这时候需要比较postMessage和服务端中存储的优缺点。如果两个项目可以互相通信且需要实时性,postMessage可能更合适;如果需要传递敏感数据或数据量较大,服务端存储更可靠。 此外,还需要考虑浏览器的兼容性问题。例如,postMessage在主流浏览器中的支持情况良好,但需要确保目标用户的浏览器环境。localStorage同样有较好的支持,但在隐私模式下可能被禁用,需要处理异常。 最后,我应该将这些方法分点整理,给出具体的实现步骤和示例代码,帮助用户更好地理解和应用。同时,提醒用户根据实际项目需求选择合适的方法,并注意相关的安全和兼容性问题。</think>在两个Vue2项目进行页面跳转传参时(跨域名或独立部署),可通过以下方案实现: --- ### 一、URL参数传递(简单数据) #### 实现步骤: 1. **发送方项目**:拼接参数到目标URL ```javascript // 跳转时携带参数 const params = new URLSearchParams({ id: 123, name: 'vue' }) window.location.href = `http://project-b.com/page?${params}` ``` 2. **接收方项目**:通过Vue Router获取参数 ```javascript // 在目标页面的created/mounted钩子中获取 export default { created() { const id = this.$route.query.id // 123 const name = this.$route.query.name // 'vue' } } ``` **特点**:明文可见,适合非敏感数据,注意URL长度限制(约2000字符) --- ### 二、localStorage跨项目共享(同浏览器) #### 实现步骤: 1. **发送方项目**:存储数据 ```javascript localStorage.setItem('crossData', JSON.stringify({ list: [1,2,3] })) window.location.href = 'http://project-b.com/page' ``` 2. **接收方项目**:读取数据 ```javascript export default { mounted() { const data = JSON.parse(localStorage.getItem('crossData')) console.log(data.list) // [1,2,3] localStorage.removeItem('crossData') // 建议清除 } } ``` **注意**:需同源策略,跨域名需特殊处理(见第四种方案) --- ### 三、PostMessage跨域通信(不同域名) #### 实现步骤: 1. **发送方项目**:打开新窗口并发送消息 ```javascript const targetWindow = window.open('http://project-b.com/page') // 确保窗口加载完成 setTimeout(() => { targetWindow.postMessage( { key: 'authToken', value: 'xyz123' }, 'http://project-b.com' // 指定目标域名 ) }, 1000) ``` 2. **接收方项目**:监听消息事件 ```javascript mounted() { window.addEventListener('message', (event) => { if (event.origin !== 'http://project-a.com') return // 验证来源 if (event.data.key === 'authToken') { console.log('Received token:', event.data.value) } }) } ``` **关键点**:严格验证`event.origin`防止安全漏洞 --- ### 四、服务端中转方案(安全敏感数据) #### 实现流程: 1. 发送方将数据提交到服务端API,获取临时令牌 2. 跳转时携带令牌:`http://project-b.com/page?token=abc` 3. 接收方通过令牌请求服务端获取完整数据 **优势**:避免数据暴露,适合传输敏感信息 --- ### 选择建议: | 方案 | 适用场景 | 数据量 | 安全性 | |------|----------|--------|--------| | URL参数 | 简单非敏感数据 | 小 | 低 | | localStorage | 同源场景 | 中 | 中 | | postMessage | 跨域实时通信 | 中 | 高(需验证) | | 服务端中转 | 敏感/大数据 | 大 | 最高 | --- ### 注意事项: 1. 跨域场景需配置CORS: ```nginx # 接收方服务器配置示例 add_header 'Access-Control-Allow-Origin' 'http://project-a.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; ``` 2. 敏感数据建议加密传输 3. 使用postMessage时注意销毁监听器: ```javascript beforeDestroy() { window.removeEventListener('message', this.messageHandler) } ``` 根据实际需求选择最适合的方案,如需示例代码深化可告知具体场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值