如何使用 vue.js 将多个带有键的值传递给 url

Posted 2023-02-16

【中文标题】如何使用 vue.js 将多个带有键的值传递给 url

【英文标题】：How to pass multiple value with key to url using vue.js

【发布时间】：2021-03-06 08:43:36

【问题描述】：

我有这个属性数据

        for(var k = 0;k<this.form.fields.length;k++)
                    
       
                        this.dynamic_fields.push(attribute_id:attributes[k].id,value: attributes[k].value)
                      
                    

this.$router.push( 
    path: '/api/search-temp',
    query:
        attributes: this.encodedAttributes()                     
    
);

    encodedAttributes() 
    const queryAttributes =this.dynamic_fields;
    if (queryAttributes) 
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(queryAttributes))
            : queryAttributes;
    
    return "";
,

我有一个属性 id 和一个属性值，所以我想将此 id 和值传递给 url，以便我在控制器属性数组中循环并获取 id 和值：

localhost:8000..?attributes[]['attribute_id_1']=attributevalue1&attributes[]['attribute_id_2']=attributevalue2...

我是这样重定向的：

 this.$router.push( path: '/search-list',query:
                    

                     
                    

问题是我想将此多维数组传递给 url，对此的任何其他解决方法也非常感谢

【参考方案1】：

您可以尝试在将对象传递给 $route 查询之前对对象进行 json 字符串化和编码

function encodedAttributes() 
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) 
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(this.$route.query.attributes))
            : queryAttributes;
    
    return "";


function decodedAttributes() 
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" && attributes.length) 
        return JSON.parse(atob(attributes));
     else 
        return attributes;
            

并作为查询参数传递给路由

this.$router.push( 
    path: '/search-list',
    query:
        attributes: this.encodedAttributes()                     
    

然后在Controller中你可以解码请求数据中的属性值来获取关联数组

class MyController extends Controller

    public function index(Request $request)
    
        $request->attributes = is_array(
            $requestAttributes = json_decode(base64_decode($request->attributes), true)
        ) 
            ? $requestAttributes 
            : [];
        
        //Do other processing as needed
    

在我的一个项目中使用了类似的东西，现在无法获得代码。

如果需要，您可能可以使用函数来转义 encodedAttributes 和 decodedAttributes 中的 unicode 字符

function escapeUnicode(str)
    return str.replace(/[^\0-~]/g, c => '\\u' + ('000' + c.charCodeAt().toString(16)).slice(-4))


function encodedAttributes() 
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) 
        return typeof queryAttributes !== "string"
            ? btoa(escapeUnicode(JSON.stringify(this.$route.query.attributes)))
            : queryAttributes;
    
    return "";



function decodedAttributes() 
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" && attributes.length) 
        return JSON.parse(atob(escapeUnicode(attributes)));
     else 
        return attributes;
            

【讨论】：

谢谢，你能否在答案中指定我将如何以及以何种格式将数据传递给 this.$route.query.attributes

这就是我在答案中显示的属性可以是 vue 组件中的普通 javascript 对象。我们正在做的是将属性对象转换为 JSON 字符串，然后在将其推送到 this.$route

之前对其进行编码

可以在Vue组件的data函数或者方法中初始化attributes。然后可以修改encodedAttributes的签名为function encodedAttributes(attributes = null) const queryAttributes = attributes ? attributes || this.$route.query.attributes; //rest of the function declaration

我试过了，但是得到了这样的 url 属性 =W3siYXR0cmlidXRlX2lkIjozLCJhdHRyaWJ1dGVfbmFtZSI6IlNlYXRzIiwidmFsdWUiOiI2In0seyJhdHRyaWJ1dGVfaWQiOjQsImF0dHJpYnV0ZV9uYW1lIjoiQ29sb3IiLCJ2YWx1ZSI6Ik90aGVyIn1d，但没有得到属性，我在我的问题中编辑了我的代码，你可以检查一下代码中的问题

是的，它是一个编码字符串，您可以在 Laravel 控制器中轻松解码。那么问题是什么 - 该网址有一些看起来令人讨厌的编码字符串。没关系，实际上从安全的角度来看它可能更可取

【参考方案2】：

您正在尝试将嵌套对象设置为查询参数，这是不可能的...您的路由查询对象必须是平面对象。

总结您拥有这样的东西的唯一方法：

?attributes[]['attribute_id_1']=attributevalue1&attributes[]['attribute_id_2']=attributevalue2

将来自这样的查询对象：

query: 
  "attributes[]['attribute_id_1']": 'attributevalue1',
  "attributes[]['attribute_id_2']": 'attributevalue2',

您应该将此多维数组展平为一个简单对象并将其用作您的查询对象。

这是一个例子... 从此：

const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

进入：

const myObject = 
  attribute_1: 'value1',
  attribute_2: 'value2'

这样做的方法是：

const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

const myObject = ;

multiDimArr.forEach(arr => 
  myObject[arr[0]] = arr[1];
);

然后使用该对象作为查询对象，这样你的url就会是这样的：

?attribute_1=value1&attribute_2=value2