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

时间:2017-03-04 04:20:36

标签: vue.js vuejs2 vue-router

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

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

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

使用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 },
    ...
]},

......我没有看到任何解决问题的方法。什么是最好的选择?

2 个答案:

答案 0 :(得分:2)

一个选项可以是使用查询参数,因此您的网址将如下所示:

  ?

/搜索国家=公畜&安培;键入= middleearth

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

答案 1 :(得分:-2)

看看你是否可以使用道具来轻松实现.. 看Vue router manual