函数:

// 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. 在CentOS 6.4中支持exfat格式的U盘

    CentOS系列一直没有默认支持使用exfat格式的大容量U盘. 可以通过添加fuse-exfat模块来支持.根据网上资料,整理如下: 1.下载fuse-exfat支持软件: exfat支持是通过fu ...

  2. json转实体,json转List实体,json转泛型实体

    1.========================= https://segmentfault.com/a/1190000009523164 package com.thunisoft.maybee ...

  3. PCL的PNG文件和计算点云重心

    PCL提供节约一点云的值为一个PNG图像文件的可能方案.显然,这只能用有序的点云来完成,因为生成的图像的行和列将与点云的对应完全一致.例如,如果你从一个传感器Kinect或Xtion的点云,你可以用这 ...

  4. ubuntu14.04 64位JDK安装

    1 官网下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html jdk-8u ...

  5. MFC中的句柄

    1.引出句柄 CDC问题:1.CDC dc;dc.LineTo(point);无法运行 2.CDC *dc=GetDC();dc->LineTo(point);就可以运行了 MFC中有大量的句柄 ...

  6. AngularJS Notes

    ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of ...

  7. oracle中merge into用法解析

    merge into的形式: MERGE INTO [target-table] A USING [source-table sql] B ON([conditional expression] an ...

  8. 关于Mac上的开发工具

    如果是JavaScript语言的话用  Intellij IDEA 如果是C/C++语言的话用  XCode

  9. Wireshark 捕获过滤器的语法

    转自:http://blog.csdn.net/qq_29277155/article/details/52077239 前言 我们都知道,wireshark可以实现本地抓包,同时Wireshark也 ...

  10. 正则表达式-----------------------------------C#的正则表达式

    为了避免以后这样的情况,在此记录下正则表达式的一些基本使用方法附带小的实例.让以后在使用时能一目了然知道他的使用,为开发节约时间,同时也分享给大家 正则元字符 在说正则表达式之前我们先来看看通配符,我 ...