How to redirect non-dynamic urls with vue-router

Question

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.

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?

Thanks for any help!

Example of a good url: https://my.piaselect.com/georgebeach

Example of a bad url: https://my.piaselect.com/georgebeach2

Our router:

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},
{
    path: '*',
    name: 'NotFound',
    component: NotFound
}

Answer 1

Building on what @Jacob Goh has said.

You need a way to to now if the agent id is valid or not. Let's assume you have a list of agent id's, you can use a route guard to block the route to invalid ids.

https://router.vuejs.org/en/advanced/navigation-guards.html

I haven't tested this, but you should be able to get the general idea.

const agentIds = ['Bob', 'Michael']

const router = new VueRouter({
  routes: [
    {
      path: '/foo:id',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if (agentIds.includes(to.params.id)) {
          // The agent is fine - continue
          next();
        } else {
          // doesn't exist - go back to root or any other page
          next({ path: '/' });
        }
      }
    }
  ]
})

Answer 2

it doesn't work because you don't specify any name in this path :

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},

because of that, this path allow any random chars at the root to return the component AgentSite (but blank because the random chars "param" fit to nothing in the component i guess).

To prevent that, you can specify a name to your path : path: "agent/:id" for example.

Edit : it seems you already had a great solution here...