title: Error: Missing required param "id" Vue-router router-link
body: <p>I am using Laravel 8 with Vue 3, vue-router, vue-loader</p>
  <p>In <code>router/index.js</code></p>
  <pre><code>import { createRouter, createWebHistory } from 'vue-router'
  import CategoryShow from '../components/category/CategoryShow'
  import PostShow from '../components/post/PostShow'
  
  const routes = [
      {
          path: '/categories/:id',
          name: 'categories.show',
          component: CategoryShow,
          props: true
      },
      {
          path: '/posts/:id',
          name: 'posts.show',
          component: PostShow,
          props: true
      },
  ]
  
  export default createRouter({
      history: createWebHistory(),
      routes
  })
  </code></pre>
  <p>In <code>post/PostShow.vue</code></p>
  <pre><code>&lt;router-link v-bind:to=&quot;{ name: 'categories.show', params: { id: post.category_id } }&quot;&gt;
      {{ post.category_name }}
  &lt;/router-link&gt;
  </code></pre>
  <p>It shows errors:</p>
  <pre><code>[Vue warn]: Unhandled error during execution of setup function 
  at &lt;RouterLink to= {name: 'categories.show', params: {…}} &gt; 
  
  Uncaught (in promise) Error: Missing required param &quot;id&quot;
  </code></pre>
  <p>But when I add <code>v-if</code> to this router-link tag like this:</p>
  <pre><code>&lt;router-link v-if=&quot;typeof post.category_id !== 'undefined'&quot; 
               v-bind:to=&quot;{ name: 'categories.show', params: { id: post.category_id } }&quot;&gt;
      {{ post.category_name }}
  &lt;/router-link&gt;
  </code></pre>
  <p>It magically works!</p>
  <p>Can anyone explain this?</p>