截取地址栏上的参数

前言

  项目开发的过程中,有时会使用到地址栏中的参数,那如何获取到地址栏中的参数呢?

获取方式

js文件

export function UrlSearch() {
    let name, value, str = location.href, num = str.indexOf("?"); //取得整个地址栏
    str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
    let arr = str.split("&"); //各个参数放到数组里
    console.log(arr)
    for (let i = 0; i < arr.length; i++) {
        num = arr[i].indexOf("=");
        if (num > 0) {
            name = arr[i].substring(0, num);
            value = arr[i].substr(num + 1);
            this[name] = value;
        }
    }
}

引入

  如果在每一个界面都需要获取地址栏中的参数的话,可以采取main.js全局挂载,如果只是在一个界面需要的话,可以只在一个界面中单独引入。

  全局挂载

  main.js中引入:

import { UrlSearch } from './components/getUrlParams';
let Request = new UrlSearch();

Vue.prototype.$Request = Request;

  界面中使用:

var applyCash = this.$Request.applyCash;
console.log(applyCash);

  单独界面中引入

import { UrlSearch } from '../components/getUrlParams'
let arrr = new UrlSearch()
console.log(arrr.applyCash);

结语

  由此就可以输出地址栏上的参数了,当然还有其他的多种方式,期待大家的留言哦!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值