vue清除地址栏参数（可以单个，可以多个）

原创已于 2023-04-27 14:16:56 修改 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-27 14:11:30 首次发布

该文章介绍了在Vue项目中，如何在跳转到新页面后清除URL中的特定参数或所有参数。主要使用了`mounted`生命周期钩子和`history.replaceState`方法来替换当前的历史记录状态，从而达到清理URL参数的效果。此外，还提供了一个根据参数名清除的函数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

vue跳转新页面后，清除url里面的参数，就是上一个页面带过来的参数，只用一次

代码

  mounted () {
    this.$nextTick(() => {
      let url = this.getnewurl()
      window.history.replaceState(null, null, url);
    })
  },
  methods: {
    //清除全部参数
    // getnewurl (name) {
    //   var loca = window.location;
    //   var baseUrl = loca.origin + loca.pathname + "?";
    //   var query = loca.href.substr(1);
    //   if (query.indexOf(name) > -1) {
    //     var obj = {}
    //     var arr = query.split("&");
    //     for (var i = 0; i < arr.length; i++) {
    //       arr[i] = arr[i].split("=");
    //       obj[arr[i][0]] = arr[i][1];
    //     }
    //     delete obj[name];
    //     var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");
    //     return url
    //   }
    // },

    //根据参数名去清除，可以多个
    getnewurl () {
      let url = document.location.href;
      let reg = /[^\w](url参数名|url参数名)=?([^&|^#]*)/g;
      url = url.replace(reg, "");
      reg = /&&/g;
      url = url.replace(reg, "");
      reg = /&#/g;
      url = url.replace(reg, "#");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      // url = url.replaceAll(document.domain,"");
      // url = url.replaceAll("http://","");
      // url = url.replaceAll("https://","");
      reg = /\?#/g;
      url = url.replace(reg, "#");
      return url;
    },