Question

我目前有一个名为Summoner.vue的Vue.js组件，当用户访问以下URL-http://localhost:8080/summoner/username

时，由于路由器而呈现了该组件

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

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

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

现在我要做的就是将一个对象作为道具从第一个组件传递到第二个组件，但是我不确定该怎么做，因为我正在使用路由器。通常我会通过这样的道具-<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 ... }})

现在召唤者组件将可以使用其道具上的所有这些参数：

// summoner.vue

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

使用router.push

1 个答案: