title: How can you pass data from a parent route to a child route in Vue.js nested routes?
body: <p>I am trying to use nested routing in my Vue.js application. I have the routing working, however I cannot figure out how to pass data from a parent route down to a child route. </p>
  
  <p>Basically, the parent route is going to retrieve an object that has properties. For each specific nested child route, I want to show one of the properties on that object. </p>
  
  <p>For example, if I have the object below:</p>
  
  <pre><code>myDataObject : {name : "Foo" , profile : "Profile Data", posts : "Posts Data" } 
  </code></pre>
  
  <p>I would like to pass the "profile" variable to the child route "/user/:id/profile". In the case of "/user/:id/posts", I would like to pass the "post" variable in. </p>
  
  <p>I thought I could accomplish this using props, but I cannot find an example that fits with routing and what I tried does not seem to work. </p>
  
  <p>Here is a link to a jsfiddle of what I am trying to do. </p>
  
  <p><a href="http://jsfiddle.net/90q4sucj/2/" rel="noreferrer">http://jsfiddle.net/90q4sucj/2/</a></p>