当路由器在 vuejs2.0 中更改时，vue-route 将不同的道具传递给不同的视图组件？

Posted 2023-02-16

【中文标题】当路由器在 vuejs2.0 中更改时，vue-route 将不同的道具传递给不同的视图组件？

【英文标题】：vue-route pass different props to different view component when router changed in vuejs2.0?

【发布时间】：2017-01-13 15:51:44

【问题描述】：

在this ticket中，当路由发生变化时，我们可以给组件传递参数

<router-view class="view" :propForA="AData"></router-view>

我的问题是如果我们需要将不同的道具传递给不同的路由组件， 例如，propForB 属性将具有 BData ，propForC 属性将具有 CData

如何做到这一点？尤其是vuejs2.0？

【参考方案1】：

我会发送一个适合您的组件的具有不同值的道具...例如：

<router-view class="view" :propData="propToSend"></router-view>

然后是这样的

export default 

  data: function () 
    return 
      propAData: 
        something: 'value',
        somethingElese: ['other', 'value']
      ,
      propBData: 
        somethingOther: 123
      ,
      propToSend: null
    
  ,

  watch: 
    '$route': function (val, oldVal) 
      if (this.$route.name === 'Something') 
        this.propToSend = this.propAData
       else 
        this.propToSend = this.propBData
      
    
  

当然还有其他方法可以达到同样的效果...

【讨论】：

这个解决方案在某种程度上有效，但并不完全符合我的要求。这为属性添加了一个包装器，我必须更改每个组件的定义对象以通过 propAData.something 和 propAData.somethingElse 检索道具。我喜欢它不会对大量遗留组件进行任何更改。刚才，我解决了它以在路由器视图定义中提供所有道具数据，这看起来很难看，但它有效。