title: Accessing $route.params in VueJS
body: <p>Looking through this documentation:
  <a href="https://router.vuejs.org/en/essentials/navigation.html" rel="noreferrer">https://router.vuejs.org/en/essentials/navigation.html</a></p>
  <p>It looks like you can bind the <code>&lt;router-link :to=&quot;variableName&quot;&gt;Link Text&lt;/routerlink&gt;</code> Which is pretty nifty; however, I've had some trouble trying to access route parameters inside of a component I'm trying to build.</p>
  <p>So I use this:</p>
  <pre><code>&lt;router-link :to=&quot;permalink&quot;&gt;Title of thing&lt;/router-link&gt;
  </code></pre>
  <p>To then direct the router view to pull the forum thread.  Using this in the router:</p>
  <pre><code>import ForumThread from './views/groupTitle/forumThreadSingle';
  
  // Other routes...
  let routes = [
      {
          path: '/groupTitle/th/:id',
          component: ForumThread,
      } 
  ]; 
  </code></pre>
  <p>I can see in the forumthread component that $route.params.id is being passed too it; however, when I try to access it like this:</p>
  <pre><code>console.log('The id is: ' + $route.params.id);
  </code></pre>
  <p>It's unable to find the params portion of the object.</p>
  <p>VueJS is pretty new to me as well as JavaScript itself.  All the examples I've seen show the templates being inline with the router file which is something I am trying to prevent to help keep my code readable and clean.</p>
  <p>What adjustments can I make so that I can pass properties to the template file?</p>
  <p>Thanks!</p>