在 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.

访问这些

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

Setting nested optional parameters in Vue 2 router

javascript

vue.js

vue-router

vuejs2