Vue在新窗口打开页面并传参

微风凉凉2024-04-12 16:15

在 Vue 中，如果你想在一个新浏览器窗口（标签页）中打开一个页面并传递参数，可以使用 window.open() 函数结合 Vue Router 提供的方法来实现。这里有几个步骤和策略：

方法一：直接拼接 URL 传参
如果你的路由参数可以通过查询字符串的形式传递且可以在地址栏显示，可以直接这样做：
Vue代码：

javascript 复制代码

// 假设你有一个id参数要传递
let id = 'someId';
let url = `/targetRoute?param=${encodeURIComponent(id)}`;
window.open(url, '_blank');

方法二：利用 $router.resolve 生成完整 URL 并传参如果你使用的是 Vue Router，并且想保持项目内部的路由规则（例如，使用动态路由匹配或者params形式传递参数），可以使用$ router.resolve 来生成目标路由的完整URL，包括参数，之后再调用 window.open()：

Vue代码：

javascript 复制代码

// 在Vue组件内
methods: {
  openInNewTabWithParams(id) {
    // 假设你的目标路由名为 'targetPage' 并且你想以params形式传递id
    const routeData = {
      name: 'targetPage',
      params: { id }
    };

    // 如果是query形式传递，参数在url中可见
    // const routeData = {
    //   path: '/targetPage',
    //   query: { id }
    // };

    // 生成完整的路由对象
    const resolvedRoute = this.$router.resolve(routeData);

    // 打开新窗口并导航至生成的URL
    window.open(resolvedRoute.href, '_blank');
  }
}

参数是通过params传递，不在URL查询字符串中可见，也能正确处理并在新窗口中加载。需要注意的是，如果希望传递的参数不显示在地址栏中，并且在用户关闭新窗口之前始终保持，可能需要在新窗口中自行管理这些参数，比如通过 Local Storage 或者通过页面初始化时从服务器获取。因为一旦新窗口被刷新，基于地址栏参数以外的方式传递的数据可能会丢失。

如果是query形式传递，参数在url中可见，页面刷新后仍然可以从route中的query获取参数。