title: How to redirect non-dynamic urls with vue-router
body: <p>We have a vue.js app for an insurance company where every agent has their own dynamically-generated website. Currently, if you visit a gibberish link, it will show the blank agent template. We need urls that don't include an agent's slug to redirect to our "NotFound" component.</p>
  
  <p>Below is our vue-router code if there happens to be an easy fix. Otherwise is it easier to add a computed function to redirect a visitor if, for example, the agent.name == null?</p>
  
  <p>Thanks for any help!</p>
  
  <p>Example of a good url: <a href="https://my.piaselect.com/georgebeach" rel="nofollow noreferrer">https://my.piaselect.com/georgebeach</a></p>
  
  <p>Example of a bad url: <a href="https://my.piaselect.com/georgebeach2" rel="nofollow noreferrer">https://my.piaselect.com/georgebeach2</a></p>
  
  <p>Our router: </p>
  
  <pre><code>{
    path: "/:id",
    component: AgentSite,
    name: 'AgentSite',
    props: true
  },
  {
      path: '*',
      name: 'NotFound',
      component: NotFound
  }
  </code></pre>