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

跳转前页面路径:
比如: 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');

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

阅读 2.8k
4 个回答

你可以使用 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查询字符串连接起来,以生成最终的查询字符串。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏