vue如何清除地址栏参数

2024-07-29 03:10:47

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值，我们也不会报错，也显示数据拉

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue地址栏直接输入路由无效问题的解决

vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用. 最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错. 因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由. 方式一:history 模式 vue-router 默认是
VueJS 取得 URL 参数值的方法

先给大家介绍下VueJS取得URL参数 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=001 结果:001 console.log(this.$route.query.id) PS:下面给大家介绍下vue自定义表单生成器可根据json参数动态生成表单效果介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再
vue如何实现动态改变地址栏的参数值

目录动态改变地址栏的参数值监听url地址栏参数变化 1.传递参数 2.监听参数变化动态改变地址栏的参数值点击切换Tab,通过watch监听,在地址栏修改对应得active参数,这样刷新后还能保持最后浏览的tab watch: { active (newValue) { let query = this.$router.history.current.query; let path = this.$router.history.current.path;
vue如何清除地址栏参数

目录 vue清除地址栏参数获取地址栏参数并且截取 vue清除地址栏参数第一种: this.$router.push({ query: {} }); 第二种: let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了获取地址栏参数并且截取今天写项目遇到这样一个问题,因为我是单独写的三个页面,我那个页面获取数据是要获取到上个页面传过来的参数才能进行请求,因为刚开始写
Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数

目录 1.未进行二次封装之前的操作 1.1 前端调用接口设计 1.2 后端接口设计 2.使用二次封装axios后的设计 2.1 封装的接口类型(只展示关键的接口调用部分) 2.2 前端调用接口设计 2.3 后端接口设计 3.友情提示 4.效果展示在对axios进行二次封装的时候.为了统一接口的设计.有些传递的参数是直接拼接到URL地址栏中的.但是为了统一管理.不能将传递的参数直接拼接到地址栏中.如何自定义传递的参数到后端,后端如何获取到这些自定义的参数?如果解决这一问题,我就能随便传递参数,不
Vue.js Ajax动态参数与列表显示实现方法

Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&
让iframe子窗体取父窗体地址栏参数(querystring)

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>让iframe子窗体取父窗体地址栏参数(querystring)</title> <script type="text/javascript"> function f(){ //http://localhost:4101/MyFiles/netshop/ShopType.
JS获取地址栏参数的几种方法小结

复制代码代码如下: <script> // 获取地址栏的参数数组 function getUrlParams() { var search = window.location.search; // 写入数据字典 var tmparray = search.substr(1, search.length).split("&"); var paramsArray = new Array; if (tmparray != null) { for (var
JS获取地址栏参数的两种方法(简单实用)

js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window
使用js获取地址栏参数的方法推荐(超级简单)

方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; }
使用JavaScript获取地址栏参数的方法

复制代码代码如下: /** * 获取地址栏参数 * * @example GetUrlString('id') * * @desc 调用时加上判断,保证程序不会出错 * var myurl = GetUrlString('id'); * if (myurl != null && myurl.toString().length > 1) { * alert(GetUrlStrin
javascript getElementsByClassName 和js取地址栏参数

getElementsByClassName() 为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName.这是对浏览器自有DOM方法的一个简单但实用的扩充. 此方法有两个参数:ele指出以哪个DOM节点为根节点寻找(也就是说只找ele的子节点),className指出符合条件的节点的class属性中必须包含怎样的className.它的返回值是一个数组,存放了所有符合条件的节点. 复制代码
js获取地址栏参数的两种方法

项目中经常遇到获取上个页面跳转过来获取当前的参数 //获取地址栏参数,name:参数名称 function getUrlParms(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null) return unescape(r[2]); return n

vue如何清除地址栏参数

目录

vue清除地址栏参数

获取地址栏参数并且截取

相关推荐

随机推荐