通过路由器将查询参数传递给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

我已经用你的功能创建了 plunker，它对我来说工作正常。

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

该函数在用户点击路由器时执行。