const urlSearchParams = new URLSearchParams(window.location.search); const keywordParam = urlSearchParams.get("keyword"); 前端kea在输入框中中让每次跳转获取到的参数实时更新
时间: 2023-10-26 13:33:00 浏览: 52
如果你想要在输入框中实时更新获取到的参数,可以在输入框的 `value` 属性中绑定获取参数的代码:
```
const urlSearchParams = new URLSearchParams(window.location.search);
const keywordParam = urlSearchParams.get("keyword");
const inputEl = document.querySelector('input[name="keyword"]');
inputEl.value = keywordParam;
// 监听输入框变化,更新 url 中的参数
inputEl.addEventListener("input", (event) => {
const newKeyword = event.target.value;
const newSearchParams = new URLSearchParams(window.location.search);
newSearchParams.set("keyword", newKeyword);
window.history.replaceState({}, "", `${location.pathname}?${newSearchParams}`);
});
```
这样就能够在输入框中实时更新获取到的参数,并且可以通过监听输入框变化来更新 url 中的参数,实现参数的实时更新。需要注意的是,如果你使用了前端路由库(如 React Router 或 Vue Router),则需要使用该库提供的路由 API 来更新参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)