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

Posted 2023-02-22

【中文标题】通过路由器将查询参数传递给vue组件

【英文标题】：Passing query parameters to vue components through the router

【发布时间】：2019-07-21 11:21:00

【问题描述】：

我正在尝试使用如下示例网址启动我的应用程序：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
,//...

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

任何帮助将不胜感激！

【参考方案1】：

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

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

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

【讨论】：

我的路由器中缺少“mode:'history'”，感谢您的帮助！