vue 一个窗口如何传递id到另一个新窗口

​

在Vue中，要将数据从一个组件传递到另一个组件，可以使用props或Vuex等技术。而要将数据从一个窗口传递到另一个新窗口，则需要通过浏览器提供的一些机制来实现。常见的两种做法如下：

1. 使用localStorage

可以使用localStorage来在两个窗口之间传递数据。localStorage是HTML5标准中提供的一种API，用于在浏览器中存储和访问数据。两个窗口都可以访问同一个localStorage，因此可以在其中存储需要传递的数据，并在另一个窗口中读取。具体实现如下：

• 在第一个窗口中，将需要传递的数据存储到localStorage：

localStorage.setItem('id', id);

• 在第二个窗口中，读取localStorage中的数据：

const id = localStorage.getItem('id');

2. 使用window.open方法的返回值

在第一个窗口中，使用window.open方法打开新窗口，并将返回值（即新窗口的window对象）存储下来。然后，可以使用返回的window对象在第二个窗口中访问第一个窗口的数据。具体实现如下：

• 在第一个窗口中，打开新窗口并存储返回值：

const newWindow = window.open('新窗口的URL', '新窗口的名称');
newWindow.data = {'id': id}; // 将需要传递的数据保存在返回的window对象中

• 在第二个窗口中，访问第一个窗口的数据：

const newData = window.opener.data; // 从返回的window对象中读取数据
const id = newData.id;

以上两种方法都可以很好地实现在两个窗口之间传递数据的目的。不过需要注意的是，使用localStorage会将数据存储在浏览器中，可能存在安全隐患，因此在存储敏感数据时需要格外小心。

​