title: Angular Routing - passing json object but param is 1 solid string
body: <p>Im building an app and passing user data around different pages, I have a variable called profileData which is a json type of Profile.</p>
  
  <p>Im passing it in the router like so:</p>
  
  <p><code>return this.router.navigate(['/chat-profile', { profile: JSON.stringify(this.profileData)  }]);</code></p>
  
  <p>when i navigate to the page the data url i see in the browser is like so </p>
  
  <p><code>http://localhost:8100/chat-profile;profile=%7B%22photos%22:%5B%5D,%22uid%22:%22AzvHdHKIYS%22,%22enabled%22:true,%22gps%22:false,%22about%22:%22%22,%22createdAt%22:%222019-04-30T14:34:06.994Z%22,%22updatedAt%22:%222019-04-30T14:34:22.033Z%22,%22gender%22:%22M%22,%22name%22:%22joe%22,%22location%22:%7B%22latitude%22:220.09,%22longitude%2222:14.46%7D,%22age%222:22,%22id%22:%22FbbQseOJFH%22%7D</code></p>
  
  <p>When accessing it in the component its just one solid string. How to pass an object in angular routing</p>