title: Vue - pass prop via router to component
body: <p>I have a component with the object "project_element" and I want to transfer the object to another component through the "vue-router".</p>
  
  <p>This is the code from my first component which opens the second component if the user clicks on the button.</p>
  
  <pre><code>&lt;router-link :to="{ name: 'project', params: { project_url: project_element.project_name, project_element: project_element} }"&gt;
       &lt;b-button&gt; Open &lt;/b-button&gt;
  &lt;/router-link&gt;
  </code></pre>
  
  <p>This is the code from my Vue Router in index.js </p>
  
  <pre><code>{
    path: '/projects/:project_url',
    component: SingleProjectViewApp,
    name: 'project',
    props: { project_element:  project_element }
  },
  </code></pre>
  
  <p>I already managed to set the "project_element.project_name" to the url but I also need the "project_element" itself in my second component. </p>
  
  <p>In the compenent I have set the object in the "props section"</p>
  
  <pre><code>props: {
    project_element: {
      type: Object,
      required: true
    }
  },
  </code></pre>
  
  <p>The problem is in the Vue Router, I can't pass the project_element like a variable, only with quotation marks. But then I get an error because obviously the component expected an object and not a string.</p>
  
  <p>Thanks for your help!</p>