Question

我正在尝试使用Vue构建一个过滤器组件，例如我有2种输入形式1。MinPrice和2 Max Price，并且我希望用户在输入字段中输入的查询文本与in中的查询参数反应网址例如，我输入最低价格：1000

total_data_summarise_by_id <- data.frame_2 %>% 
                                  group_by(clie_id) %>%
                                  summarise(first_date = min(purchase_date),
                                            min_purchase_amount = min(purchase_amount),
                                            max_purchase_amount = max(purchase_amount),
                                            mean_purchase_amount = mean(purchase_amount))

当我输入maxprice时：2000，URL如下：

localhost/minprice=1000

如何在地址中添加多个查询参数而不更改我拥有的最后一个参数url？

谢谢

Answer 1

您可以添加一个提交按钮，然后使用绑定数据使用查询参数创建一个URL，最后设置位置对象。

// in click handler
const url = `localhost://thePage?minprice=${this.minPrice}&maxprice=${this.maxprice}`

IMO，最好使用URL的hash部分代替查询参数，因此不需要重新加载页面。

const url = `localhost://thePage#minprice=${this.minPrice}&maxprice=${this.maxprice}`

您将过滤组件（不刷新），并设置哈希值。然后，如果用户刷新或添加了书签，则过滤器将保留下来。 window.location.hash = ...

无论哪种方式，您都将在加载组件时读取URL属性并将绑定的属性设置为它们。

参数网址Vue Js

1 个答案: