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

【问题标题】：How to pass props in BootstrapVue to router-link如何将 BootstrapVue 中的道具传递给路由器链接
【发布时间】：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 })
}

【讨论】：