Question

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

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>

Answer 1

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

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

Answer 2

如果要使用道具重定向到另一个页面。您可以使用它。

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

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

，您还可以使用方法。

<b-nav-item @click="changeRoute">Fixtures</b-nav-item>

data: {
    props: {
        name: 'Manuel',
        age: 'June'
     }
  },

methods: {
    changeRoute(){
      //u can name it to data or what ever you want.
      this.$route.push({name: 'Fixtures', data: this.props});
    }
}

有关更多路由示例和文档，建议您阅读以下内容：
https://router.vuejs.org/guide/essentials/navigation.html

将道具传递给路径组件
https://router.vuejs.org/guide/essentials/passing-props.html

通过boostrap-vue b-nav-item将道具传递到vue-router

2 个答案: