截取地址栏上的参数

前言

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

获取方式

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);

结语

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