https://segmentfault.com/a/1190000010124638 全面分析vue2.0饿了么,值得一看
能够获取url地址中 ? 后面的数据并且还带上问号
window.location.search;
如:http://192.168.43.124:8080/api/seller?id=123456中?
window.location.search
返回结果:
?id=123456
data () {return {seller: {
// 展示部分id:(()=>{ let queryParam =urlParse();// console.log(queryParam)return queryParam.id;})()} } },
url请求地址为 /api/seller?id=123456
带上参数id,此id就是 展示部分的id,
elink方法 ( () =>{} )() 返回id的 默认值
queryParam 是 js封装方法 ,import导入: import {urlParse} from “@/common/js/util”;
queryParam方法作用是:通过正则表达式匹配url地址中带的参数,并处理返回json格式数据
util.js文件中
/* * 解析url参数 * @example ?id=12345&a=b * @return Object {id:123456,a:b} */ export function urlParse(){
let url = window.location.search;let obj={};//返回一个json对象,初始化let reg=/[?&][^?&]+=[^?&]+/g; //正则表达式 [?&]:匹配以?或&开头的 [^?&]+ 匹配 非? 或 非& 开头的 +代表一个或多个字符 =:就是=等号字符,没有特殊意义 let arr =url.match(reg) //match() 正则表达式里面的方法 查询匹配项返回一个数组//arr=['?id=123456','&a=b']if (arr) {arr.forEach(item => {
//item.substring(1)把arr=['?id=123456','&a=b']中的 ? 去掉let tempArr=item.substring(1).split('=');//.split('=') 把arr中等于号=做分割成数组let key=decodeURIComponent(tempArr[0]);let val=decodeURIComponent(tempArr[1]); obj[key] = val;});}return obj;
}
重点在这里,向服务器端带参数请求数据
/api/seller?id='+this.seller.id
思路 点击商品列表,含有商品id,请求到详情页,在详情页中向服务器请求带参数id的数据
注意还要导入import axios from ‘axios’
created () {this.getGoods() // 本地JSON},methods: {// 本地json获取商品数据getGoods () {axios.get('/api/seller?id='+this.seller.id).then((res) => {this.seller = res.data.data;// console.log(this.seller);})}},
Object.assign(target, source1, source2);
这是es6的语法,用于对象合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
var target = { a: 1, b: 1 };var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
另外需要注意的是Object.assign()方法 只会拷贝 源对象自身的并且可枚举的属性 到目标身上。
也就意味着继承属性和不可枚举属性是不能拷贝的,
而且拷贝 是对象的属性的引用 而不是对象本身。
重点这是json对象
let idObj={
"id":this.seller.id}// 本地json获取商品数据getGoods () {axios.get('/api/seller?id='+this.seller.id).then((res) => {// this.seller = res.data.data;let idObj={
"id":this.seller.id}this.seller=Object.assign({},idObj,res.data.data);//assign()es6语法,用于对象的合并// console.log(this.seller.id);})}