Vue Router：如何将查询字符串作为属性传递给命名视图中的组件？

Question

我的应用程序有两个命名视图：main和tray。我正在尝试将URL的查询字符串作为对MainComponent视图中的main的支持，例如localhost:8080/?foo=bar。它不起作用。

我的路线：

routes: [
{
  path: '/:foo',
  name: 'home',
  components: {
    main: MainComponent
  },
  props: {
    main: true,
    tray: false
  }
},
{
  path: '/info',
  name: 'info',
  components: {
    tray: Info
  }
}
]

我也尝试过设置道具：

 props: {
    main: (route) => ({ test: route.params.test }),
    tray: false
  }

就像：

props: true

我在foo中添加了MainComponent作为道具，但仍未定义。但是，组件可以像下面这样访问查询：this.$route.query.foo。现在，我可以添加一个参数并以这种方式手动设置它，但是将其设置为prop是正确的方法。

有什么想法吗？