I am currently in the process of transitioning my SPA from modals that load components to routed pages that load components. I have been able to successfully open a page using to="/fixtures" in the html, but I am facing an issue with passing in a component that has a prop containing some data. How can I pass a prop called fixtures using vue-router and the bootstrap-vue
<b-nav tabs> <b-nav-item>Home.vue CODE THAT IS NOT WORKING:
<b-nav-item to="/fixtures" :fixtures="fixtures">Fixtures</b-nav-item>
Here is the index.js file from the router:
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"
});
This method works when using modals:
<b-tab title="Fixtures">
<Fixtures :fixtures="fixtures" />
</b-tab>