javascript - 当使用 router.push 进行转换时，将 props 从一个组件传递到另一个组件

Question

我目前有一个名为 Summoner.vue 的 Vue.js 组件当用户访问以下 URL - http://localhost:8080/summoner/username 时，路由器会呈现该内容

在该组件中我有一个 <div>单击时触发方法的元素，将用户发送到新 URL - http://localhost:8080/summoner/username/match/4132479262它呈现不同的组件 Match.vue 。像这样:

<div @click='specificMatch(match.gameId)'>

specificMatch(gameId){
    router.push('/summoner/' + this.summoner + '/match/' + gameId)
}

现在我想做的就是将一个对象作为 Prop 从第一个组件传递到第二个组件，但我不确定如何做到这一点，因为我正在使用路由器。通常我会传递这样的 Prop - <summoner v-bind:match="match.id"></summoner>但我想这对我来说不起作用，因为我使用的是路由器。

这些是我的路线:

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/summoner/:summonerName',
        name: 'summoner',
        component: Summoner
    },
    {
        path: '/summoner/:summonerName/match/:matchId',
        name: 'match',
        component: Match
    }
    ]
})

Answer 1

以下是如何使用 vue-router 属性来做到这一点:

 {
        path: '/summoner/:summonerName',
        name: 'summoner',
        component: Summoner,
        props : true // now you can pass props to this route
    }

然后当你想导航到它时:

this.$router.push({ name : summoner , params : { summonerName : this.summoner , somedata : 'hello'  etc ... }})

现在召唤器组件将可以访问其 Prop 上的所有这些参数:

// summoner.vue

export default {
  props : ['somedata',...]
  ...
}