返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何清除地址栏参数
  • 170
分享到

vue如何清除地址栏参数

2024-04-02 19:04:59 170人浏览 薄情痞子
摘要

目录Vue清除地址栏参数获取地址栏参数并且截取vue清除地址栏参数 第一种: this.$router.push({ query: {} }); 第二种: let path = th

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何清除地址栏参数

本文链接: https://lsjlt.com/news/166433.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何清除地址栏参数
    目录vue清除地址栏参数获取地址栏参数并且截取vue清除地址栏参数 第一种: this.$router.push({ query: {} }); 第二种: let path = th...
    99+
    2024-04-02
  • vue清除地址栏路由参数方式
    目录vue清除地址栏路由参数vue删除query中个别参数或清除query总结vue清除地址栏路由参数 方式一: let path = this.$route.path; //先获取...
    99+
    2023-01-28
    vue清除路由参数 清除地址栏路由参数 地址栏路由参数
  • vue如何获取地址栏的参数
    具体方法如下:使用params方式获取地址栏参数export default new Router({routes: [{ path: '/', name: 'LoginView', component: L...
    99+
    2024-04-02
  • vue中如何监听url地址栏参数变化
    目录vue监听url地址栏参数变化1、传递参数2、监听参数变化vue检测url的变化-Kaiqisan总结vue监听url地址栏参数变化 问题: 在开发过程中我们有可能会遇到一个问题...
    99+
    2023-03-10
    vue监听 监听url地址栏参数 vue地址栏参数
  • Vue3如何获取地址栏参数
    本篇内容介绍了“Vue3如何获取地址栏参数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Vue3 获取地址栏参数有两个方式:查询参数和路径参...
    99+
    2023-07-06
  • 如何通过Vue路由改变地址栏的参数
    Vue是一款非常流行的JavaScript框架,它提供了许多方便开发者的功能。其中,Vue路由(Vue Router)是Vue的一个子模块,负责管理视图与地址之间的映射关系。使用Vue路由,我们可以轻松地将不同的视图对应到不同的URL地址上...
    99+
    2023-05-14
  • vue-router如何实时动态替换路由参数(地址栏参数)
    目录实时动态替换路由参数(地址栏参数)应用场景用法如下replace()和push() 的区别动态替换路由-Url参数安装webpack-merge引入包操作参数实时动态替...
    99+
    2024-04-02
  • vue如何实现动态改变地址栏的参数值
    目录动态改变地址栏的参数值监听url地址栏参数变化1.传递参数2.监听参数变化动态改变地址栏的参数值 点击切换Tab,通过watch监听,在地址栏修改对应得active参数,这样刷新...
    99+
    2024-04-02
  • vue中怎么监听url地址栏参数变化
    这篇“vue中怎么监听url地址栏参数变化”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中怎么监听url地址栏参数变化...
    99+
    2023-07-05
  • 如何在电脑清除vps地址
    要在电脑上清除VPS地址,您可以按照以下步骤进行操作:1. 打开计算机上的网络设置。这可以通过在Windows操作系统中点击任务栏上...
    99+
    2023-09-07
    vps
  • Vue3获取地址栏参数方法详解
    目录一、查询参数二、路径参数三、注意点Vue3 获取地址栏参数有两个方式:查询参数和路径参数。 Vue3获取地址栏参数是从路由router中获取,查询参数和路径参数获取方式不一样。 ...
    99+
    2023-05-17
    Vue3获取地址栏参数 Vue3地址栏参数 Vue3参数
  • 怎么在Vue.js中隐藏地址栏参数
    本文小编为大家详细介绍“怎么在Vue.js中隐藏地址栏参数”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么在Vue.js中隐藏地址栏参数”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、动态路由首先,我们可以...
    99+
    2023-07-05
  • Vue如何获取url路由地址和参数简单示例
    目录1.window.location2.vue-router 获取参数补充:vue获取地址栏地址url截取参数总结 1.window.location 实例:http:/...
    99+
    2023-05-13
    vue 获取url地址的参数 vue获取当前页面的url vue 获取url参数
  • vue如何清除事件
    在vue中清除事件的方法:1.新建vue.js项目;2.添加按钮,并绑定事件;3.通过添加标记位清除事件;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create project-namevue.js项目创建好后...
    99+
    2024-04-02
  • Vue怎么获取url路由地址和参数
    这篇“Vue怎么获取url路由地址和参数”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue怎么获取url路由地址和参数”文...
    99+
    2023-07-05
  • vue中如何获取本地IP地址
    目录获取本地IP地址1、在浏览器中2、在vue文件中,实现如下获取本地内网IP获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这...
    99+
    2024-04-02
  • centos7如何清空网络地址缓存
    centos7中清空网络地址缓存的方法:1、打开centos7终端;2、在终端命令行中输入“sudo /etc/init.d/dns-clean start”命令进行清空网络地址缓存即可。具体操作步骤:在centos7系统桌面中使用快捷键【...
    99+
    2024-04-02
  • linux如何清空网络地址缓存
    linux中清空网络地址缓存的方法:1、打开linux终端;2、在终端命令行中输入“sudo /etc/init.d/dns-clean start”命令进行清空网络地址缓存即可。具体操作步骤:在linux系统桌面中使用快捷键【Ctrl+A...
    99+
    2024-04-02
  • ubuntu如何清空网络地址缓存
    ubuntu清空网络地址缓存的方法:打开ubuntu系统,进入终端命令行。输入以下命令进行清空网络地址缓存即可。$sudo /etc/init.d/dns-clean start //清除DNS缓存、网络地址缓存...
    99+
    2024-04-02
  • 如何解决IE地址栏ICON显示问题
    小编给大家分享一下如何解决IE地址栏ICON显示问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!我在自己的Blog遇到了这样一个问题:我在后台修改了“<l...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作