通过路由器将查询参数传递给vue组件

Question

我正在尝试使用如下示例网址启动我的应用程序：https://www.example.com/?foo=bar

我在Vue路由器中尝试了以下操作，如此处（https://router.vuejs.org/guide/essentials/passing-props.html#function-mode）所述：

function dynamicPropsFn (route) {
  console.log(route.query.foo) // undefined ??
  return {
    foo: route.query.foo
  }
}

//...
{
  path: "/",
  name: "landing",
  meta : {layout : 'landing'},
  component : Landing,
  props: dynamicPropsFn
},//...

我的问题是查询字符串参数始终未定义...

任何帮助将不胜感激！

Answer 1

我用您的功能创建了插件，它对我来说很好用。

[https://codepen.io/anon/pen/moePxK]

该功能在用户单击路由器时执行。