Vue.js：如何移除URL链接中的plt参数

方法一：用原生URL API（推荐） #

这个方法依赖浏览器原生的URL和URLSearchParams，逻辑清晰且不易出错，适合处理任意格式的URL：

// 定义处理URL的方法
removePltParam(url) {
  const urlObj = new URL(url);
  // 删除plt参数
  urlObj.searchParams.delete('plt');
  // 返回处理后的完整URL
  return urlObj.toString();
}

使用示例：

const originalUrls = [
  'http://example.com/post?st=1&plt=123&number=1',
  'http://example.com/post?st=1&plt=[exp]&number=1',
  'http://example.com/post/view/12?ex=1&plt=123',
  'http://example.com/post/edit/12?ex=1&test=2&plt=[exp]'
];

originalUrls.forEach(url => {
  console.log(this.removePltParam(url));
});

方法二：正则表达式替换 #

如果不想用URL API，也可以用正则匹配替换掉plt参数，覆盖参数在开头、中间、结尾的所有情况：

removePltParam(url) {
  // 匹配plt参数的三种存在形式：开头、中间、结尾
  return url.replace(/([?&])plt=[^&]+(&|$)/g, (match, p1, p2) => {
    // 处理替换后可能残留的?或&
    if (p1 === '?' && p2 === '') {
      return '';
    }
    return p2 === '' ? '' : p1;
  });
}

方法三：处理Vue路由中的query参数 #

如果是要修改当前页面的路由（移除plt参数），可以直接操作Vue Router的query对象：

// 在Vue组件中调用
this.$router.replace({
  ...this.$route,
  query: {
    ...this.$route.query,
    // 删除plt属性
    plt: undefined
  }
});

如果需要保留历史记录，将replace换成push即可。

内容的提问来源于stack exchange，提问作者Miedkes