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 [, ...
随机推荐
- USB学习笔记连载(十三):keil的配置环境
在对USB设备的驱动名字进行更改时,需要利用keil软件对固件进行修改,并生成 .iic 文件烧录到CY7C68013A所带的外部EEPROM中,keil生成的 .hex文件只能烧录到 Cypress ...
- ps常用快捷键
一. 二. 三.
- 关于Unity中的世界坐标和局部坐标
1.物体的局部坐标的方向(物体自身的方向) transform.forward. transform.right. transform.up 2.物体的世界坐标的方向 Vector3.forward. ...
- 关于Mac上的开发工具
如果是JavaScript语言的话用 Intellij IDEA 如果是C/C++语言的话用 XCode
- tornado 的 define 和options方法解读
一.源码解读 tornado是facebook开源的非阻塞web容器,类似java的netty,tornado.options是负责解析tornado容器的全局参数的,同时也能够解析命令行传递的参数和 ...
- 关于js的小知识
基本数据类型:Undefined, Null, Boolean, Number, String . 引用数据类型:Object . 个人觉得对Java等语言的程序员来说,最不能接受的就是下面这样的代码 ...
- C#提高-------------------Module的使用
如果没有看<C#反射(一)>.建议先看<C#反射(一)>再看这一篇.上一篇文章发表,有人评论我所写的东西比较基础.其实我也知道我也只不过是在写最基础的语法而已,之所以写它是因为 ...
- 如何使用Matrix对bitmap的旋转与镜像水平垂直翻转
Bitmap convert(Bitmap a, int width, int height){int w = a.getWidth();int h = a.getHeight();Bitmap ne ...
- python_smtplib
import smtplib smtpserver = 'smtp.qq.com' fromaddr = 'fromaddr@qq.com' toaddrs = 'toaddr@qq.com' msg ...
- Winform控件学习笔记【第五天】——ListView
[第五天] 常用的基本属性: FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. GridLines:设置行和列之间是否显示网格线.( ...