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

Question

我正在尝试使用示例 url 启动我的应用程序，例如：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]

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

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

Passing query parameters to vue components through the router

vue.js

vue-router