时间戳

首页 > 解决方案 > 参数 URL Vue Js

vue.js - 参数 URL Vue Js

问题描述

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

localhost/minprice=1000

当我输入 maxprice : 2000 时，网址如下：

localhost/minprice=1000&maxprice=2000

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

谢谢

标签： vue.js

解决方案

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

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

IMO 最好使用hashURL 的一部分，而不是查询参数，因此页面不需要重新加载。 

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

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

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

推荐阅读