vue 两个及以上router-link复用同一个路由并传递参数 如何传递json对象参数

Question

下面是两个router-link，他们共同访问同一个路由组件。

<li><router-link :to="{name:'home',params:{pageInfo: imgsrc }}">hello</router-link></li>
<li><router-link :to="{name:'home',params:{pageInfo: imgurl }}">nihao</router-link></li>

路由定义

export default new Router({
  routes:[{
      path: '/home/:pageInfo',
      name: 'home',
      component: home
    }]
})

传递参数（1）：

data () {
    return {
      imgsrc: {background: require('@/imgs/solution_One.png'), text: 'hello'},
      imgurl: {background: require('@/imgs/solution_Three.png'), text: 'successful'}
    }
   }

路由组件接收（1）：

<div :style="{backgroundImage:`url(` + this.$route.params.pageInfo.background+ `)`}" class="bac">
      {{this.$route.params.pageInfo.text}}
</div>

传递参数（2）：

data () {
    return {
      imgsrc: require('@/imgs/solution_One.png'),
      imgurl: require('@/imgs/solution_Three.png')
    }
   }

路由组件接收（2）：

<div :style="{ backgroundImage:`url(` + this.$route.params.pageInfo + `)`}" class="bac">
      {{ this.$route.params.pageInfo }}
</div>

当我使用传递参数（1）和路由组件接收（1）这种方式时，点击hello，能够传参给路由组件，再点击nihao时，显示的还是hello的信息。

当我使用传递参数（2）和路由组件接收（2）这种方式时，点击hello，显示hello传递的信息，点击nihao显示你好传递的信息。

对于这种情况，不知道是什么原因，希望能有大神给予解答。

Answer 1

老铁，这个问题解决了嘛？感觉是vue的复用机制导致的，但是加了:key=''好像还是没有效果