如何将 BootstrapVue 中的道具传递给路由器链接

Posted 2023-02-22

【中文标题】如何将 BootstrapVue 中的道具传递给路由器链接

【英文标题】：How to pass props in BootstrapVue to router-link

【发布时间】：2020-01-11 15:25:03

【问题描述】：

这是 BootstrapVue 导航栏的使用方式https://bootstrap-vue.js.org/docs/components/navbar，但对于一个视图，我需要从导航栏向它传递一个道具。

在原始 Vue 中添加它非常容易，但 BootstrapVue 似乎没有解决方案。有人知道吗？

这是一个工作副本，

<b-nav-item to="/login">register</b-nav-item>

我想把它改成这样的：

<b-nav-item to="/login" :action="'register'">register</b-nav-item>

“action”是我需要传递的道具。

【参考方案1】：

通过使用Location object 在:to 属性上使用查询参数：

<b-nav-item :to=" path: '/login' query:  action: 'register' ">
  register
</b-nav-item>

或者，如果您的路线是为参数 slug 设置的（即 `/login/:action'）：

<b-nav-item :to=" path: '/login' params:  action: 'register' ">
  register
</b-nav-item>

如果您使用命名路由，您只需将上述内容调整为使用name 而不是path。

【讨论】：

“登录”后缺少逗号

【参考方案2】：

您应该在路由 URL 中将 action 作为参数传递。然后在您的路由声明中，您可以为来自 URL 的该路由分配一个 prop。我会像这样格式化 URL：

<b-nav-item to="/login?action=register">register</b-nav-item>

然后在您的路径声明中，使用如下内容：

  path: 'login',
  name: 'login',
  component: Login,
  props: (route) => ( action: route.query.action )

【讨论】：

这是我的解决方法。而且应该是route.query.action。还是谢谢。

请帮助解决相关问题。 ***.com/questions/58822854/…