函数:

// url解析函数
// ?id=111&name=567 => {id:111,name:567}
export function urlParse(){
let obj = {};
let reg = /[?&][^?&]+=[^?&%]+/g;
let url = window.location.search;
let arr = url.match(reg);
arr.forEach((item) => {
let tempArr = item.substring(1).split('=');
let key = decodeURIComponent(tempArr[0]);
let val = decodeURIComponent(tempArr[1]);
obj[key] = val;
})
return obj;
}

函数作用:解析url地址获得一个对象

使用方法:把以上代码添加到你的公共函数库

<tempalte>

</tempalte>
<script>
import {urlParse} from 'urlParse.js';
export default {
data() {
return {
news: {
id: (() =>{
let get = urlParse();
// console.log(get.id); 123
return get.id;
})()
}
}
}
// 发送带参数的请求
created() {
this.$axios.get('/api/news?id=' + this.news.id).then((res) => {
// success callback
let myData = res.data.data;
// 合并对象
this.news = Object.assign({},this.news,myData);
})
}
}
</script>

其实用vue-router更简单

vuejs解析url地址的更多相关文章

  1. javascript 对象的方式解析url地址参数

    看到一个知识点,比如说给一个 url参数,让其解析里面的各个参数,以前我都是通过字符串分割来实现的.但是通过这样的方式比较麻烦,而且操作字符串容易出错.今天看到了一个更有效更快速的方式,就是通过对象来 ...

  2. javascript中new url()属性,轻松解析url地址

    1.首先写一个假的地址(q=URLUtils.searchParams&topic=api)相当于当前的window.location.href const urlParams = new U ...

  3. jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址

    jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据.

  4. 2016/5/6 thinkphp ①框架 ② 框架项目部署 ③MVC模式 ④控制器访问及路由解析 ⑤开发和生产模式 ⑥控制器和对应方法创建 ⑦视图模板文件创建 ⑧url地址大小写设置 ⑨空操作空控制器 ⑩项目分组

    真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格不一样) 项目稳 ...

  5. 【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息

    1.比如我们要获取的网站URl地址是:https://music.163.com/#/playlist?id=2384581760 一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方 ...

  6. 详解Node解析URL网址

    前提给大家声明一下,我操作的环境是Mac终端下操作的.(前提是你先要下载好node.js) 说道URL 恐怕都不陌生,但是要说URL,就 必须先说下URI URI是统一资源标识符,是一个用于标识某一互 ...

  7. URL地址中使用中文作为的参数【转】

    原文:http://blog.csdn.net/blueheart20/article/details/43766713 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作 ...

  8. VueJS取得URL参数

    vuejs取得URL中参数的值 地址:http://localhost:3333/#/index?id=001 结果:001 console.log(this.$route.query.id)

  9. PHP的学习--解析URL

    PHP中有两个方法可以用来解析URL,分别是parse_url和parse_str. parse_url 解析 URL,返回其组成部分 mixed parse_url ( string $url [, ...

随机推荐

  1. 微信支付WxpayAPI_php_v3(三)支付成功回调

    接收回调通知后的业务处理都在NotifyProcess做,$data包含了微信返回给你的数据. Service: <?php /** * Created by PhpStorm. * User: ...

  2. python datetime和unix时间戳之间相互转换

                                python datetime和unix时间戳之间相互转换 1.代码:    import time    import datetime # ...

  3. kindle书摘-活着-余华-活着不易,珍惜

     https://github.com/starrtc/android-demo 中文版自序 标注(黄色) - 位置 29 作家的使命不是发泄,不是控诉或者揭露,他应该向人们展示高尚.这里所说的高尚不 ...

  4. Altium Designer 正反面布元器件

    1.统一设置PCB中注释字体的大小:在PCB编辑状态,鼠标指向任一需要修改的丝印字符,右键选择find similar object,这时会弹出的对话框中将代表元件字符的选项右边对应选项改为same, ...

  5. 引入css少引入了rel="stylesheet" 这行代码。导致整个页面空白、

    忘记引入rel="stylesheet" 如下: <link  href="css/swiper-3.3.1.min.css" /> 这样使得整个页 ...

  6. VMWare Workstation虚拟机网卡工作模式及配置方法

    打开VMware→虚拟机→设置.如下图 一. 桥接模式(Bridge) 可将虚拟系统IP与本地系统设在同一网段,此时虚拟机相当于一台网络中与本机公用一个HUB的独立设备,网络中其他机器与虚拟机器.本地 ...

  7. VidLoc: A Deep Spatio-Temporal Model for 6-DoF Video-Clip Relocalization

    用双向lstm对序列图片做相机定位.

  8. js放大镜代码

    js原生放大镜 <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta char ...

  9. pandas 的算术运算和数据对齐

    pandas 还有一个重要的功能,就是他可以对不同索引的对象进行算数运算.对象相加, 如果存在不同的索引对,则结果的索引就是该索引对的并集. 先来个例子 Series In [33]: s1 = Se ...

  10. qualcomm permission denied for tty device

    在app中访问串口,提示没有读写权限.本文记录解决方法. 调试 查看设备节点权限 shell@msm8909:/ # ll /dev/ttyHSL* crw------- root root 246, ...