javascript - 在Vue 2路由器中设置嵌套可选参数

Question

我正在创建一个搜索引擎，其中包含用户可以选择的多个过滤器以及查询。所有这些都是可选的，并且添加到过滤的结果集中。

因此所有这些情况都是可能的，并且可以正确存储在关键字对象中:

• 使用查询进行搜索
• 按国家/地区搜索(不指定任何查询)
• 按类型搜索(不指定任何查询)
• 使用国家/地区和类型搜索查询
• ...

使用 Vue Router 处理此问题的最佳方法是什么？我希望使用选择的任何过滤器来更新搜索路线。

据我所知，我不能使用多个可选参数，除非我指定所有可能的组合(这有点愚蠢)，例如:

export const routes = [
{ path: '/search', name: 'search', component: Search, children: [
    { path: 'query/:query, component: Search },
    { path: 'type/:type', component: Search },
    { path: 'country/:country', component: Search },
    ...
]},

...我没有看到任何其他方法来解决这个问题。最好的选择是什么？

Answer 1

一种选择是使用查询参数，因此您的 URL 将如下所示:

/search?country=sire&type=middleearth

您可以从 $route.query 访问这些内容.