函数:

// 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. 阿里云免费SSL证书绑定+sever2012 IIS配置

    1.阿里云域名 2.点击证书 3.免费证书 4.下载证书 5.服务器-运行-mmc 进入制台程序 6.制台程序,选择菜单“文件"中的"添加/删除管理单元”-> “添加”,从“ ...

  2. 分治算法--寻找第k大数

    问题描述:给定线性序集中n个元素和一个整数k,1≤k≤n,要求找出这n个元素中第k大的元素,(这里给定的线性集是无序的). 其实这个问题很简单,直接对线性序列集qsort,再找出第k个即可.但是这样的 ...

  3. TinyBlob、Blob、MediumBlob、LongBlob大小

    BLOB类型的字段用于存储二进制数据 MySQL中,BLOB是个类型系列,包括:TinyBlob.Blob.MediumBlob.LongBlob,这几个类型之间的唯一区别是在存储文件的最大大小上不同 ...

  4. mysql 5.7.10 启动多实例笔记

    1. 复制配置文件 cp /etc/my.cnf /etc/my3308.cnf 2. 修改配置文件 3. 创建目录, 并赋予权限 4. 初始化数据库 ---> 有报错 2018-01-03T0 ...

  5. (笔记)Linux下system()函数的深度理解(整理)

    注:从其它地方转的非常好的一篇文章,值得深究! 这几天调程序(嵌入式linux),发现程序有时就莫名其妙的死掉,每次都定位在程序中不同的system()函数,直接在shell下输入system()函数 ...

  6. 对C语言中指针的入门理解

    通过一个例子引出对指针的概念理解 1,例子 #include<stdio.h> int main(void) { ; //小张的身高 ; //小李的身高 ; //小王的身高 int *xi ...

  7. php 文件上传类,功能相当齐全,留作开发中备用吧。

    收藏一个经典好用的php 文件上传类,功能相当齐全,留作开发中备用吧. 好东西,大家都喜欢,才是真的好,哈哈!!! <?php  /**   * 文件上传类   */  class upload ...

  8. JAVA组成原理及使用方法编辑环境及实现过程

    JAVA组成原理一.由四方面组成:1.Java编程语言2.Java类文件格式3.Java虚拟机4.Java应用程序接口 当编辑并运行一个Java程序时,需要同时涉及到这四种方面.二.使用文字编辑软件: ...

  9. jQuery table td可编辑

    参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...

  10. C++ namespace的用法

    //namesp.h namespace pers{     const int LEN = 40;     struct Person{         char fname[LEN];       ...