vuejs解析url地址
函数:
// 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地址的更多相关文章
- javascript 对象的方式解析url地址参数
看到一个知识点,比如说给一个 url参数,让其解析里面的各个参数,以前我都是通过字符串分割来实现的.但是通过这样的方式比较麻烦,而且操作字符串容易出错.今天看到了一个更有效更快速的方式,就是通过对象来 ...
- javascript中new url()属性,轻松解析url地址
1.首先写一个假的地址(q=URLUtils.searchParams&topic=api)相当于当前的window.location.href const urlParams = new U ...
- jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址
jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据.
- 2016/5/6 thinkphp ①框架 ② 框架项目部署 ③MVC模式 ④控制器访问及路由解析 ⑤开发和生产模式 ⑥控制器和对应方法创建 ⑦视图模板文件创建 ⑧url地址大小写设置 ⑨空操作空控制器 ⑩项目分组
真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格不一样) 项目稳 ...
- 【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息
1.比如我们要获取的网站URl地址是:https://music.163.com/#/playlist?id=2384581760 一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方 ...
- 详解Node解析URL网址
前提给大家声明一下,我操作的环境是Mac终端下操作的.(前提是你先要下载好node.js) 说道URL 恐怕都不陌生,但是要说URL,就 必须先说下URI URI是统一资源标识符,是一个用于标识某一互 ...
- URL地址中使用中文作为的参数【转】
原文:http://blog.csdn.net/blueheart20/article/details/43766713 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作 ...
- VueJS取得URL参数
vuejs取得URL中参数的值 地址:http://localhost:3333/#/index?id=001 结果:001 console.log(this.$route.query.id)
- PHP的学习--解析URL
PHP中有两个方法可以用来解析URL,分别是parse_url和parse_str. parse_url 解析 URL,返回其组成部分 mixed parse_url ( string $url [, ...
随机推荐
- SpringBoot 开启 Actuator
在生产环境中,需要实时或定期监控服务的可用性.spring-boot 的actuator(监控)功能提供了很多监控所需的接口.简单的配置和使用如下: 1.引入依赖: <dependency> ...
- 深入浅出学习hibernate框架(三):java的反射机制
上篇博客写到了JDBC的基本操作,今天准备写一篇关于JAVA反射机制的文章,因为java的反射机制和上一篇JDBC都是Hibernate框架的基本要素.在Hibernate的运行机制中,这两块的内容正 ...
- 你应该知道的CSS2.0中最常用的18条技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- [hadoop读书笔记] 第四章 Hadoop I/O操作
P92 压缩 P102 序列化 序列化:将结构化对象转为字节流便于在网上传输或写到磁盘进行永久性存储的过程 用于进程之间的通信或者数据的永久存储 反序列化:将字节流转为结构化对象的逆过程 Hadoop ...
- JSP之使用useBean、setProperty、getProperty指令
useBean指令用于在JSP页面中初始化一个Java实例,setProperty指令用于为JavaBean实例的属性设置值,getProperty指令用于输出JavaBean实例的属性. 例子: J ...
- JBMP学习引导
好文: 偶然机会,认识了工作流系统,并且在www.open-open.com(相当不错的开源项目站点,极力推荐!)上了解了些相当出色的工作流系统,不过呼声最高的应该属JBoss 的JBPM工作流组件了 ...
- 【WPF】创建文本字符串的路径PathGeometry
/// <summary> /// 创建文本路径 /// </summary> /// <param name="word">文本字符串< ...
- VIM下的普通模式的相关知识
什么为一次操作? 从进行插入模式开始,直到返回普通模式为止,在此期间的任何修改都视为一次操作: 使用 u 可以撤销最新的修改: 所以呢,控制好在插入模式的操作就可以控制好撤销命令的粒度: 另外,最 ...
- Salt-ssh批量自动安装被控端salt-mini
Salt-ssh是Saltstack的另外一种管理方式,无需安装minion端,可以运行salt的一切功能,管理和使用方法基本和salt一样.但是,salt-ssh并没有继承原来的ZeroMQ通讯架构 ...
- 每天一个linux命令:mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...