截取地址栏上的参数

news/2024/7/10 1:51:25 标签: vue

前言

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

获取方式

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

结语

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


http://www.niftyadmin.cn/n/1659533.html

相关文章

sprite精灵图转二倍图

精灵图 精灵图又名雪碧图&#xff0c;产生原因是网页首次加载的时候需要加载很多图片&#xff0c;为了解决服务器拥堵的问题。精灵图可以缓解加载时间过长&#xff0c;从而提升用户体验。精灵图就是把很多小的图片合并到一张大的图片中&#xff0c;在首次加载的时候只需要加载出…

Flex入门基础——项目item的属性(order、flex-grow、flex-shrink、flex-basis、flex、align-self)

1、order 取值&#xff1a;数值 功能&#xff1a;&#xff08;1&#xff09;容器中有多个项目&#xff0c; &#xff08;2&#xff09;项目的默认摆放时沿主轴&#xff08;纵向&#xff09;方向&#xff0c;即按文档中dom元素的书写顺序进行排列的&#xff1b; 应用&#xf…

vue-cli4新建项目及分环境打包

写在前面 小编之前一直使用的是vue-cli2&#xff0c;没想到现在vue-cli4都出来挺长时间的了。现在就来探索一下脚手架4是如何新建项目并且进行分环境打包的吧。 新建项目一 1.winR进入cmd命令窗口&#xff0c;到自己要建项目的路径下&#xff0c;这里我的目录是桌面   2.新建…

Flex布局应用(1)——为什么flex只能做移动端APP开发?

1、APP的分类 &#xff08;1&#xff09;原生APP &#xff08;2&#xff09;混合APP &#xff08;3&#xff09;WEB APP 2、PC端和移动端的差别 &#xff08;1&#xff09;用户交互方式不同&#xff1a;表现在鼠标、手指 &#xff08;2&#xff09;呈现的数据量不同&#…

深入理解Vuex

什么是Vuex Vuex是实现组件全局状态管理的一种机制&#xff0c;可以方便的实现组件之间数据的共享。使用Vuex可以集中的管理共享数据&#xff0c;高效实现数据共享&#xff0c;另外Vuex的数据是响应式的&#xff0c;可以实时保持数据与页面的同步。 安装方式 在使用vue-cli3或…

Javascript运动概念1——缓冲运动、匀速运动、运动框架

概念—— A、运动基础&#xff1a; &#xff08;1&#xff09;让div运动起来 &#xff08;2&#xff09;速度——物体运动的快慢 &#xff08;3&#xff09;运动中的Bug a、不会停止 b、速度取某些值会无法停止 c、到达位置后再点击还会运动 d、重复点击速度加快 B、匀…

2019年终总结---在前端的成长

不知不觉&#xff0c;2019已经悄然而逝&#xff0c;回顾这一年&#xff0c;更多的是自己在前端方面的成长和能够在前端锻炼的各种契机。 对前端框架的接触&#xff0c;从Vue开始在前端接触的第一个项目&#xff0c;是订餐后台的重构。 刚开始的时候&#xff0c;讨论用什么技术来…

Javascript运动概念2——多物体运动框架

1、多个物体同时运动 例子&#xff1a;多个div&#xff0c;鼠标移入变宽 Bug——单定时器&#xff0c;存在问题 解决办法&#xff1a;将每个div一个定时器 2、多物体运动运动框架 &#xff08;1&#xff09;多物体运动框架 a、定时器作为物体的属性 b、参数的传递&#xf…