vue如何清除地址栏参数

 更新时间:2022年08月31日 09:41:31   作者:我是关小花  
这篇文章主要介绍了vue如何清除地址栏参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue清除地址栏参数

第一种:

this.$router.push({ query: {} });

第二种:

let path = this.$route.path; //先获取路由路径
this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了

获取地址栏参数并且截取

今天写项目遇到这样一个问题,因为我是单独写的三个页面,我那个页面获取数据是要获取到上个页面传过来的参数才能进行请求,因为刚开始写参数是直接写成固定死的了

然后我就在想,肯定要获取到当前页面的url地址,这样后边才能截取url地址中的参数,代码如下

     var url = window.location.href; //获取地址栏路径
     var temp1 = url.split('?');//对url地址进行分割
     var pram = temp1[1];
     var keyValue = pram.split("&");
     var obj = {};
     for (var i = 0; i < keyValue.length; i++) {//循环分割挂过后的地址
       var item = keyValue[i].split("=");
       var key = item[0];
       var value = item[1];
       obj[key] = value;
     }
     console.log(url);
     console.log(pram);
     console.log(keyValue);
     consile.log(obj)//obj就是我么分割后从上个页面传过来数据的对象
     console.log(obj.orgCode);
     this.orgCode = obj.orgCode;//对data里面定义的orgCode进行赋值

我是要取到上面代码中obj对象里面的orgCode参数,然后在接口中进行拼接参数就可以了

然后这个写完我又遇到了一个问题,如果从上个页面没传过来参数的话,浏览器会报split的错。因为后边没有参数进行分割,如下图

后来我又想到一个方法,我们可以在进行split分割的时候进行判断,有参数的话就进行分割,没传过来参数就return false 返回一个false值 代码如下:

//在methods里面定义一个方法
 getQueryString(variable) {
      var index = window.location.href.indexOf("?");//获取地址栏路径并进行分割
      var query = window.location.href.substr(
        index + 1,
        window.location.href.length
      );
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;//如果没有参数就返回false 值,就不会出现上边报错的情况了
    },

然后我们需要在上边调用这个方法

  created() {
    //调用请求接口并获取url的orgCode参数
    this.Getactiononlad(this.getQueryString("orgCode"));
  },

上面代码 this.Getactiononlad是我定义的请求接口方法

在后边直接在调用获取url地址的方法

orgCode就是要获取的参数

 methods: {
    Getactiononlad(orgCode) {//定义请求接口的方法
    //要把orgCode传在方法里面
      getObjectInfo(orgCode, this.ApprovalUserName)//getObjectInfo是在api封装好的接口
        .then((res) => {
          if (res.isSuccess == true) {
            if (res.data.list.length > 0) {
              this.$toast("请求成功");
              this.iSshownotFiled = false;
              res.data.list.forEach((element) => {
                this.Ordersubmitlist.push(element);
              });
            } else {
              this.iSshownotFiled = true;
            }
          } else {
            this.$$toast("请求出现异常");
          }
        })
        .catch((error) => {
          this.$toast(error.message);
        });
    },
    }

这个时候我们看一下效果

它已经不报错了,显示没有数据

如果我们传orgCode参数的话,效果图如下

这样通过上个页面url传过来的orgCode值,我们也不会报错,也显示数据拉

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 + async-validator实现表单验证的示例代码

    vue3 + async-validator实现表单验证的示例代码

    表单验证可以有效的过滤不合格的数据,减少服务器的开销,并提升用户的使用体验,今天我们使用 vue3 来做一个表单验证的例子,需要的朋友跟随小编一起学习下吧
    2022-06-06
  • 浅析Vue下的components模板使用及应用

    浅析Vue下的components模板使用及应用

    这篇文章主要介绍了Vue下的components模板的使用及应用,本文通过代码介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue使用ECharts实现折线图和饼图

    vue使用ECharts实现折线图和饼图

    这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue中刷新子组件重新加载子组件三种方法

    vue中刷新子组件重新加载子组件三种方法

    组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,这篇文章主要给大家介绍了关于vue中刷新子组件重新加载子组件三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue实现图片与文字混输效果

    Vue实现图片与文字混输效果

    用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,小编给大家分享Vue实现图片与文字混输效果,感兴趣的朋友一起看看吧
    2019-12-12
  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • 关于ElementPlus中的表单验证规则详解

    关于ElementPlus中的表单验证规则详解

    这篇文章主要介绍了关于ElementPlus中的表单验证,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue项目设置多个静态文件及自定义静态文件目录的方案详解

    Vue项目设置多个静态文件及自定义静态文件目录的方案详解

    本文介绍了如何在Vue项目中配置多个静态文件目录,并提供了使用Vite和Webpack实现的示例,通过在vite.config.ts或vue.config.js中引入相关插件和配置,可以轻松实现自定义静态文件目录,希望这些内容对您有所帮助,感兴趣的朋友一起看看吧
    2025-01-01
  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    这篇文章主要介绍了在Vue中使用CSS3实现内容无缝滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue中引入使用patch-package为依赖打补丁问题

    Vue中引入使用patch-package为依赖打补丁问题

    这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论