我可以使用 vue-router 将下拉列表的值数据绑定到 URL 的查询参数吗？

Question

我想将下拉列表绑定到 URL 中的查询参数，所以

• 打开 /page?dropdown=foo 时，我希望下拉菜单中有 foo 预选
• 反之亦然：将下拉列表的值更改为 bar 时，将 URL 重写为 /page?dropdown=bar.

我现在的问题：
有没有开箱即用的方法告诉 vue-router 对此进行数据绑定？

或者我是否需要手动完成，所以当 entering/changing 路线时，设置下拉菜单的值并在下拉菜单上使用 :onchange 来调用 router.replace()？

Answer 1

据我所知，你不能按照你想的那样绑定它，但肯定有一种方法可以实现。

在路由器配置中，可以将props设置为true，这意味着route.params将被设置为组件道具，因此dropdown将是设置 URL（foo 或 bar）的值。

让你的组件对 prop dropdown 的变化做出反应，这可以解决你的第一个问题。

对于第二个问题，我认为你的方法是正确的，使用replace方法，这会改变URL，并导航到它但没有添加新的历史记录条目，只是更换它。