函数:

// 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. css 可穿透

    pointer-events : none; 引自:http://www.thinkphp.cn/topic/4702.html

  2. C++ vector清空元素的三种方法

    #include <iostream> #include <vector> using namespace std; //STL vector的几种清空容器(删除)办法 voi ...

  3. TL431的几种常用用法

    TL431的主要作用是使得电路获得更稳定的电压,TL431是一种较为精密的可控稳压源,有着较为特殊的动态阻抗.其动态响应速度快,输出噪声低,价格低廉. 注意上述一句话概括,就是便宜,精密可控稳压源TL ...

  4. SDRAM 学习笔记(三)

    上图是terasic公司提供的SDRAM控制器,大部分已经封装好,我们需要修改其中部分代码,以此来实现我们自己需要的功能. 1.PLL时钟设定 首先上面的sdram_pll.v中产生上一篇博客所需要的 ...

  5. C语言中的循环语句练习

    注:练习题目均出自<明解C语言 入门篇> 一.do语句 1,求多个整数的和及平均值 #include<stdio.h> int main(void) { ; //和 ; //整 ...

  6. mysql监控工具sqlprofiler,类似sqlserver的profiler工具

    最近无意发现了mysql的客户端监控工具“Nero Profile SQL”,刚开始还不知道怎么使用,经过半小时摸索,现将使用步骤写下来. 背景:开发的时候,如果数据存储层这块使用EF,或者其他orm ...

  7. Python——thread

    该模块在Python 3中更名为 _thread. 该模块实现对Python多线程的低层次操作原语,也提供了多线程之间用于同步的锁机制.threading 模块基于本模块提供了更易用的高层次线程API ...

  8. 核心动画——Core Animation

    一. CALayer (一). CALayer简单介绍 在iOS中,你能看得见摸得着的东西基本上都是UIView,比方一个button.一个文本标签.一个文本输入框.一个图标等等.这些都是UIView ...

  9. PyQt的图片资源的路径问题。

    百度到的PyQt的添加资源大部分都是通过Qt Creater添加资源的,适用于拖拽形成的界面. 问题一:纯粹手写的界面,添加资源呢? 文件夹路径: |----img |--aa.jpg |----vi ...

  10. linux stat命令参数及用法详解

    功能说明:显示inode内容.语 法:stat [文件或目录]补充说明:stat以文字的格式来显示inode的内容. ls 命令及其许多参数提供了一些非常有用的文件信息.另一个不太为人所熟知的命令 s ...