window.open跳转问题,开不了新窗口也没有刷新页面

Question

使用vue写的一个列表，利用window.open方法去打开一个新窗口界面，但是参数不同，从第二次开始window.open方法好像失效了，不会再打开新窗口，参数虽然带过去了但是还是在第一次开的那个窗口；
第一次打开的地址：http://192.168.66.102:3199/XCGL/#/flow/approve?id=1879786693336367104&nodeId=1856940745848206464
第一次打开的地址：http://192.168.66.102:3199/XCGL/#/flow/approve?id=1879786342266678896&nodeId=1856940745848206464%E5%B0%B1%E5%BC%80%E4%B8%8D%E4%BA%86%E6%96%B0%E7%AA%97%E5%8F%A3%EF%BC%8C%E4%BC%9A%E8%B7%B3%E5%88%B0%E7%AC%AC%E4%B8%80%E6%AC%A1%E6%89%93%E5%BC%80%E7%9A%84%E9%82%A3%E4%B8%AA%E7%AA%97%E5%8F%A3%EF%BC%8C%E7%99%BE%E6%80%9D%E4%B8%8D%E5%BE%97%E5%85%B6%E8%A7%A3

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

用户在Vue项目中使用window.open方法打开一个新窗口，第一次可以正常打开，但从第二次开始，window.open方法似乎失效了，参数虽然传递过去了，但页面并没有在新窗口中打开，而是跳转到了第一次打开的窗口。用户提供的两个URL如下：

1. 第一次打开的地址：http://192.168.66.102:3199/XCGL/#/flow/approve?id=1879786693336367104&nodeId=1856940745848206464
2. 第二次打开的地址：http://192.168.66.102:3199/XCGL/#/flow/approve?id=1879786342266678896&nodeId=1856940745848206464

问题定位

1. 浏览器行为：window.open方法在默认情况下，如果多次调用相同的URL，浏览器可能会复用同一个窗口，而不是每次都打开一个新窗口。
2. Vue路由：Vue的路由系统可能会影响页面的跳转行为，尤其是在使用#作为路由模式时。
3. 缓存问题：浏览器可能会缓存页面的状态，导致第二次打开时没有正确加载新的参数。

解决方案

1. 使用window.open的name参数

window.open方法允许指定一个name参数，该参数可以用于标识窗口。如果多次调用window.open时使用相同的name，浏览器会复用同一个窗口。为了避免这种情况，可以为每次调用window.open时生成一个唯一的name。

function openNewWindow(url) {
    const uniqueName = 'window_' + Date.now(); // 生成唯一的窗口名称
    window.open(url, uniqueName);
}

2. 强制刷新页面

如果希望每次打开新窗口时都强制刷新页面，可以在URL后面添加一个随机参数，以确保每次打开的URL都是唯一的。

function openNewWindow(url) {
    const uniqueParam = '&t=' + Date.now(); // 添加时间戳作为随机参数
    const uniqueName = 'window_' + Date.now(); // 生成唯一的窗口名称
    window.open(url + uniqueParam, uniqueName);
}

3. 检查Vue路由配置

确保Vue路由配置正确，特别是如果使用了#作为路由模式，确保路由能够正确处理参数的变化。

const router = new VueRouter({
    mode: 'hash', // 或者 'history'
    routes: [
        {
            path: '/flow/approve',
            component: ApproveComponent
        }
        // 其他路由配置
    ]
});

完整代码示例

// Vue组件中的方法
methods: {
    openNewWindow(id, nodeId) {
        const baseUrl = 'http://192.168.66.102:3199/XCGL/#/flow/approve';
        const url = `${baseUrl}?id=${id}&nodeId=${nodeId}`;
        const uniqueParam = '&t=' + Date.now(); // 添加时间戳作为随机参数
        const uniqueName = 'window_' + Date.now(); // 生成唯一的窗口名称
        window.open(url + uniqueParam, uniqueName);
    }
}

总结

通过为每次调用window.open生成唯一的窗口名称和添加随机参数，可以避免浏览器复用同一个窗口的问题。同时，确保Vue路由配置正确，能够正确处理参数的变化。这样，每次调用window.open时都会打开一个新的窗口，并且页面会正确加载新的参数。

希望这个解决方案能够帮助你解决问题！如果还有其他问题，欢迎继续提问。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑