使用 bootstrap-vue b-nav-item 将 props 传递给 vue-router答案

【问题标题】：pass in props to vue-router, with boostrap-vue b-nav-item使用 bootstrap-vue b-nav-item 将 props 传递给 vue-router
【发布时间】：2020-04-17 01:59:30
【问题描述】：

我正在尝试将我的 SPA 从加载组件的模式更改为加载组件的路由页面。我可以在 html 中使用 to="/fixtures" 打开一个页面，但我不能传入一个包含一些数据的 prop 的组件。如何使用 vue-router 和 bootstrap-vue <b-nav tabs> <b-nav-item> 传递 fixtures 的道具？

Home.vue 不工作：

<b-nav-item to="/fixtures" :fixtures="fixtures">Fixtures</b-nav-item>

来自路由器的 index.js：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/components/Home.vue";
import Scorers from "@/components/Scorers.vue"
import LeagueTable from "@/components/LeagueTable";
import Fixtures from "@/components/Fixtures";

Vue.use(VueRouter);

export default new VueRouter({


  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/fixtures",
      name: "Fixtures",
      component: Fixtures,
      props: true
    }

  ],
  mode: "history"
});

使用模态此方法有效：

<b-tab title="Fixtures">
      <Fixtures :fixtures="fixtures" />
    </b-tab>

【问题讨论】：

标签： javascript vue.js vue-router bootstrap-vue

【解决方案1】：

要将道具作为路线的一部分传递，请使用：

<b-nav-item :to="{ path: '/fixtures', props: { fixtures: fixtures } }">Fixtures</b-nav-item>

【讨论】：

仍然无法正常工作，在我的 Fixtures.vue 文件中，我收到了固定装置的道具作为手表：{}，然后执行一些方法来创建一个新数组，然后使用 v-for 循环在一张桌子上，你能在组件文件夹中看到这里吗？该组件适用于模态但不适用于路由器codesandbox.io/s/flamboyant-carson-sm9j0
您可能需要将 :to 设为计算属性.. 但不是积极的副手。