Vue Router going back one step in history causes unmatched error

I have a route set up which works perfectly by rendering a single component. However it fails when I want to navigate back one step in history using Router.back() or Router.go(-1) (same thing according to the docs)

{
        path: '/chat/:URLSlug(-.*)?/:Info([0-9]+)?',
        name: 'Chat',
        component: () => import('../Chat.vue'),
}
  1. To get to the homescreen of Chat the user goes to /chat and is shown a list of chats

  2. When a user selects a chat, the Chat opens and the user is pushed to /chat/example-chat-name like such:

    VueRouter.push({ 
       name: 'Chat',
       params: {
                URLSlug: 'example-chat-name'
               }
     });
    
  3. If a user clicks to see Info about the Chat, they are pushed to /chat/example-chat-name/1 like such:

    VueRouter.push({ 
       name: 'Chat',
       params: {
                URLSlug: 'example-chat-name'
                Info: 1
               }
     });
    

These steps are all using the same component Chat.vue. It just shows/hides stuff depending on what the user clicked on.

  1. Now the user is finished seeing the Info screen he clicks on the Back button which runs VueRouter.go(-1); should take him from /chat/example-chat-name/1 to chat/example-chat-name:

However this throws an error of:

Uncaught (in promise) Error: No match for {“name”:””,”params”:{}}
while being at
{“fullPath”:”/chat/example-chat-name”,”path”:”/chat/example-chat-name”,”query”:{},”hash”:””,”params”:{},”matched”:[],”meta”:{},”href”:”/chat/example-chat-name”}

I also noticed that the Chat.vue component has been unmounted in Vue devtools and disappears. If the user clicks the Back button again, it returns to /chat homescreen and Chat.vue component is mounted again.

Clearly there is something up with the route when going back from chat/example-chat-name/1 to chat/example-chat-name but I can’t figure out what or why.