引导搜索栏添加“？搜索=”到路由器

Posted 2023-02-22

【中文标题】引导搜索栏添加“？搜索=”到路由器

【英文标题】：Bootstrap Search Bar adding "?search=" to router

【发布时间】：2020-10-13 19:51:49

【问题描述】：

我在 Vue 项目的 App.js 的导航栏中添加了一个切换搜索栏（此处为指南/代码：https://www.solodev.com/blog/web-design/creating-a-toggled-search-bar.stml）。

但是，每当我在输入搜索词后按“回车”（或在没有我自己的点击功能的情况下单击搜索按钮）时，搜索功能会将?search=（+ 搜索词）添加到我的路由器。 我尝试过创建一个查找用户按下回车的函数，但没有成功。

似乎添加到路由器的代码中没有明确的功能。如果不破坏搜索框，我无法让它停止这样做。

我正在寻找一种方法：

阻止引导搜索框将?search=添加到我的路由器，而是按照我自己的路由方法 或 使用 vue-router 在路由器末尾捕获?search= 并重定向到搜索结果页面。

谢谢！

【参考方案1】：

您可以使用 this.$route.query.search 在 vue-router 中捕获搜索参数（查询 url）作为您的示例，当用户单击按钮时，只需像这样使用此查询推送用户

this.$router.push( name: 'your-route-name', query:  'search': this.$route.query.search  )

【讨论】：

您的意思是this.$route.query.search 吗？

@JamesAMohler 是的，很抱歉错字。 :)