参数 URL Vue Js答案

【问题标题】：Parameter Url Vue Js参数 URL Vue Js
【发布时间】：2019-02-15 21:07:48
【问题描述】：

我正在尝试使用 Vue 构建一个过滤器组件，例如我有 2 个输入表单 1. Min Price 和 2 Max Price，我希望用户在输入字段中输入的查询文本与查询参数在网址例如我输入最低价格：1000

localhost/minprice=1000

当我输入 maxprice : 2000 时，url 就像：

localhost/minprice=1000&maxprice=2000

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

谢谢

【问题讨论】：

标签： vue.js

【解决方案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 属性并将绑定的属性设置为它们。

【讨论】：