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);
  
  }

上一篇:Seata AT 事物方案


下一篇:网络编程基础之TCP学习(二)编程案例