Vue dynamic routing issue (loads wrong component after hitting refresh)

I am facing some issues with the dynamic routing of my vue app.

I have 3 routes in my app:

  1. Root component /

  2. Dynamic routing event/:id

  3. Create event component event/create

Everything works fine when I navigate through the components

However when I hit refresh on event/create, it loads the wrong component and loads event-show component instead of event-create.

Any idea why this happens, has it got something to do with my dynamic routing?

I think I found the issue, the dynamic route /event/:id must come after /event/create in router.js

routes = [
  {
    path: "/",
    name: "event-list",
    component: EventList
  },
  {
    path: "/event/create",
    name: "event-create",
    component: EventCreate
  },
  {
    path: "/event/:id",
    name: "event-show",
    component: EventShow,
    props: true
  }
];

But I am not entirely sure of the logic behind this, if anyone has an answer would be great

{
    path: "/event/:id",
    name: "event-show",
    component: EventShow,
    props: true
},
{
    path: "/event/create",
    name: "event-create",
    component: EventCreate
},

Assuming that you have declared create route after show route, the :id will match anything that comes after /event/ even undefined. So when you are declaring routes make sure that there is no clash.

That makes sense thanks!