函数:

// 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. 【C】——动态库中函数的作用范围

    如何生成动态库 net小伙 已经在此文中说明——[C]——如何生成静态库和动态库:接下来就要看看动态库中函数的作用范围: 首先我们使用命令   gcc -fPIC -shared -o libtest ...

  2. es 加磁盘扩容

    elasticsearch多磁盘扩容   1.问题 由于早前elasticsearch集群数据存储路径只配置了一个,所以某天磁盘突然爆满,集群差点当机.需重新配置多路径存储路径,因为在生产环境,得保证 ...

  3. Spring Boot Gradle 打包可执行Jar文件!

    使用Gradle构建项目,继承了Ant的灵活和Maven的生命周期管理,不再使用XML作为配置文件格式,采用了DSL格式,使得脚本更加简洁. 构建环境: jdk1.6以上,此处使用1.8 Gradle ...

  4. Linux下 mkdir 命令详解

    一次性地建立多级目录,则可以使用-p参数 # mkdir -p /home/dir1/dir2/dir3

  5. 6 ways to import data into SQL Server

    I’m going to go over some methods to import data from text files into SQL Server today. The particul ...

  6. SharePoint 2013 Support for Windows Server 2012 R2

    Summary Currently, Microsoft SharePoint Server 2013 is not supported for installation on computers r ...

  7. windows下QJson的编译和安装

    本文是编译安装Qjson过程中遇到的问题解决过程.主要参照网上资料和自己试验得到. 关于Qjson的用处参照:Qt 学习之路 2(63):使用 QJson 处理 JSON Qjson clone地址: ...

  8. 自然语言交流系统 phxnet团队 创新实训 个人博客 (八)

    今天想测试一下“庖丁”分词的效果,编写了一个测试小程序,从文件中读入文本,并将分词结果显示到控制台. 环境平台:Win7+eclipse 过程如下: 1.编辑paoding-analysis.jar中 ...

  9. 关于Unity中如何立即中断动画然后重新开始播放

    今天做一个FPS游戏的时候,用的是新版的动画系统,遇到一个问题. 就是用枪打敌人的时候,敌人会播放一个被击中的动画,但是如果在动画播放的过程中再射击敌人,敌人会先把第一个被击中的动画播放完,才再播放第 ...

  10. 【3】JVM-OutOfMemory异常重现

    JVM中常见的OOM,那么如何通过自己编写代码产生这些OOM异常呢?通过写代码重现异常,是为了避免在工作中写出有OOM BUG的代码.之前虽然看过相关文章,但是没自己写过这些代码,这次在编写的实际过程 ...