其他分享
首页 > 其他分享> > Vue系列:通过vue-router如何传递参数

Vue系列:通过vue-router如何传递参数

作者:互联网

 })
  
  这里有2个关键点:
  
  a)给该路由命名,也就是上文中的 name: 'history',
  
  b)在路径中要使用在路径中使用冒号开头的数字来接受参数,也就是上文中的 :deviceId, :dataId;
  
  (2)在v-link中传递参数;
  
  <a v-link="{ name: 'history', http://zzdxjyzd.comparams: { deviceId: 123, dataId:456 }}">history</a>
  
  这里的123,456都可以改用变量。
  
  比如该template所对应的组件有2个变量定义如下:
  
  data: function() {
  
  return {
  
  deviceId:123,
  
  dataId:456
  
  }
  
  }
  
  此时上面那个v-link可以改写为:
  
  <a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>
  
  (3)在router的目标组件上获取入参
  
  比如在router目标组件的ready函数中可以这么使用。
  
  ready: function(){
  
  console.log('deviceid: ' + this.$route.params.deviceId);
  
  console.log('dataId: ' + this.$route.params.dataId);
  
  }

标签:dataId,Vue,456,vue,deviceId,组件,router,history
来源: https://www.cnblogs.com/dakunqq/p/11293861.html