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'),
}
-
To get to the homescreen of
Chat
the user goes to/chat
and is shown a list of chats -
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' } });
-
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.
- Now the user is finished seeing the
Info
screen he clicks on theBack
button which runsVueRouter.go(-1);
should take him from/chat/example-chat-name/1
tochat/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.