title: Vue Router passing props to dynamic routes, unclear documentation
body: <p>I have a <code>ProjectCard</code> component which, among other things, links to a specific <code>ProjectPage</code> component. The ProjectPage is going to have a bunch of different paragraphs, pictures and so on, not wholly relevant for my question.</p>
  <p>How do I pass on props to a <code>ProjectPage</code>? The <a href="https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode" rel="nofollow noreferrer">Vue Docs</a> portion on <em>Boolean Mode</em> is incredibly vague and doesn't really tell me anything useful.</p>
  <p>My Router <code>index.js</code> file has the prop decoupling that they mention in the docs</p>
  <pre class="lang-js prettyprint-override"><code>import ProjectPage from &quot;@/views/ProjectPage.vue&quot;
  
  const routes = [
      {
          path: &quot;projects/:id&quot;,
          component: ProjectPage,
          props: true
      }
  </code></pre>
  <p>To test things out, I made the <code>ProjectPage.vue</code> component look like this</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;Static text, followed by {{ testString }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: &quot;ProjectPage&quot;,
          props: {
              testString: String
          }
      };
  &lt;/script&gt;
  </code></pre>
  <p>And I tried passing on a test string to it from my <code>ProjectCard</code> component like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;router-link class=&quot;project-link&quot; :to=&quot;{ path: `projects/${url}`, params: { testString: 'a dynamic string' } }&quot; exact&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: &quot;ProjectCard&quot;,
          props: {
              url: String
          }
      };
  &lt;/script&gt;
  </code></pre>
  <p>This will correctly take me to the specified route, eg <code>projects/table</code>. However, the <code>{{ testString }}</code> doesn't render and I can only see the <code>Static text, followed by a</code> portion of the component. There's no errors or warnings in the console.</p>
  <p>Checking a <code>ProjectCard</code> component in the Vue debugger, the <code>testString</code> exists nested under <code>to/params/testString</code>:</p>
  <p><a href="https://i.stack.imgur.com/o1WHA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o1WHA.png" alt="Vue Debugger for ProjectCard" /></a></p>
  <p>However, on any of the <code>ProjectPage</code> components, <code>testString</code> is <code>undefined</code></p>
  <p><a href="https://i.stack.imgur.com/HGA4U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGA4U.png" alt="Vue Debugger for ProjectPage" /></a></p>
  <p>What am I doing wrong here?</p>