关于html界面与vue界面跳转的问题

问题描述:

请问html与vue界面互相携带参数跳转如何实现？

例如从vue界面需要携带一个数组参数跳转到html。然后html更具参数进行相关处理，再跳转到vue 或直接把参数回调到vue界面中或存到vuex 中。请问该怎么实现？

相关截图:

程序员叶某 2023-02-08

源自：前端框架VUE3.0 4-1 用户列表

收起

1回答

好帮手慕小尤 2023-02-09 10:00:22

同学你好，1、老师下方和同学描述一下思路，如果同学感兴趣建议同学系统的学习一下前端知识。

2、Vue向html中传递数据

1）vue中的代码

在data中定义一个iframe绑定的页面的对象。

1	`iframeWin: {}`

2）在mounted中去绑定具体Iframe的页面

1	`this.iframeWin = this.$refs.iframe.contentWindow;`

3）发送信息给甘特图

sendIframeWinpMessage() {
    this.iframeWin.postMessage({
        params: "你想传的数据" /*在iframe页面中接收通过key也就是param接收，因此传输的数据可以是对象，包含多个key以及对应的数据*/
    }, "*");
},

4）html中的代码

在html中接收vue端传过来的值

window.addEventListener("message", function (event) {
  var data = event.data;
  console.log("从vue中获得的数据", data);
  // 定义一个变量去接收,然后就可以获得vue传过来的数据
  var test = data.params;
}, '*')

3、html向Vue中传递数据

由于vue可以向iframe页面中传值，同理iframe也可以向vue页面中传值，方式如下。

1）html页面中的代码

// 向vue中发送数据
window.parent.postMessage({
  params: "你想传输的值",
  cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
},'*');

2）vue中的代码

在mounted中加载监听事件，并配上处理监听对象的方法。

1	`window.addEventListener("message",` `this.handleMessage);`

在method中定义方法，用于处理监听的事件。

handleMessage(event) {
   // 获取从iframe页面中传过来的值
   var cmd = event.data.cmd;
   var params = event.data.params;
 }

祝学习愉快！

收起回答

提问者程序员叶某 #1

请问如何实现html与vue两者之间携带参数跳转

2023-02-09 10:23:07
好帮手慕小尤回复提问者程序员叶某 #2

同学你好，同学可以使用window.location.href，将调整路径与参数拼接在一起。
祝学习愉快！

2023-02-09 10:43:26
提问者程序员叶某回复好帮手慕小尤 #3

如何保证vue携带参数跳转html，相互跳转，且从html点击返回后仍然携带参数返回到上次vue界面？

2023-02-09 10:48:49