vue项目跳转至外部链接并传参？

  • Z时代
  • 2024-02-25
  • 分类：IT

跳转前页面路径：
比如： http://localhost:8005/main/

想要跳转到页面：https://a/b/aa = 12 & bb = 33& cc = 44

用router.push会连源地址一起跳转：localhost:8005/main/https://a/b/aa = 12 & bb = 33& cc = 44；

目前采用方法：

const url = 'aa = 12 & bb = 33& cc = 44';
window.open(https:${url},'_blank');

直接拼接参数感觉不够优雅，请问下还有其它更好的方法吗？

回答：

你可以使用 URLSearchParams 对象来构建查询字符串，然后将生成的查询字符串作为 path 参数传递给 router.push 方法。示例代码如下：

// 构建查询参数
const query = new URLSearchParams({
  aa: '12',
  bb: '33',
  cc: '44'
}).toString();
// 构建目标路径
const path = `/a/b?${query}`;
// 跳转到目标路径
this.$router.push(path);

在上面的示例中，我们使用 URLSearchParams 对象来构建查询字符串，并将查询参数设置为 'aa=12&bb=33&cc=44'。然后，我们将查询字符串拼接到目标路径 /a/b 中，并将拼接后的路径作为 path 参数传递给 $router.push 方法。这样就可以避免在跳转时自动连源地址一起跳转的问题。

回答：

没有了，这种方法就挺好

回答：

你可以用 URL 和 URLSearchParams 类来构建和编码 URL。这样可以避免直接拼接参数，还更优雅一些，下面我写了示例，你可以参考一下：

const baseUrl = 'https://a/b/';
const params = new URLSearchParams();
params.append('aa', 12);
params.append('bb', 33);
params.append('cc', 44);
const url = new URL(baseUrl);
url.search = params.toString();
window.open(url.toString(), '_blank');

回答：

外部跳转这种方法应该是最好了，至于拼接参数手动拼接不方便可以写个方法去实现
可以使用JavaScript中的Object.entries()方法和Array.prototype.map()方法来实现将对象转换为URL查询字符串的操作。以下是示例代码：

function objectToQueryString(obj) {
  return Object.entries(obj)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}
const obj = { a: 1, b: 2, c: 3 };
const queryString = objectToQueryString(obj);
console.log(queryString); // 输出: "a=1&b=2&c=3"

在上述示例中，objectToQueryString()函数接受一个对象作为参数，并返回一个字符串，该字符串是将对象转换为URL查询字符串后的结果。在函数内部，我们首先使用Object.entries()方法将对象转换为一个键值对数组，然后使用Array.prototype.map()方法将每个键值对转换为一个URL查询字符串。最后，我们使用Array.prototype.join()方法将所有的URL查询字符串连接起来，以生成最终的查询字符串。

请注意，以上示例代码仅考虑了对象中的简单类型值，如果对象中包含复杂类型值（例如数组或对象），则需要进行适当的处理以确保生成正确的查询字符串。

以上是 vue项目跳转至外部链接并传参？ 的全部内容， 来源链接： utcz.com/p/934018.html

回到顶部