0

For a project I am making I will be using a route that looks something like this: collection/id. The server returns an 404 error when the given ID does not exist.

When this happens I would like to push the 404 error page that I have in my router.

{
    name: 'notfound',
    path: '/:pathMatch(.*)*',
    component: () => import('../views/PageNotFoundView.vue'),
}

Now this is achieved by calling the following code: this.$router.push('/notfound');. However, this also changes the URL in the browser which is not something I would want. When reloading the page you should be going to collection/id.

Is there any way to push a navigation route (or component?) without changing the URL displayed?

Example: https://google.com/ajdfkasf doesn't go to https://google.com/404 but rather you keep the link and can refresh it. I could include the component in the view instead of trying to solve this with routes, but that would add overhead to all kinds of views.

Marten
  • 63
  • 8
  • I guess that you could change the markup of your current route with a (global) 404 component's page. But I'm not sure of the benefit of such thing. Also, depending if you fetch data there, you could have a generic answer baked into your fetching function to see if it fails and display a fallback text. – kissu Oct 11 '22 at 11:06
  • Still wish to know why you don't want the user to reach a 404, because staying on the same page looks like some hack (if not using that as an empty response when making the HTTP call). Also, how would a user be accessing something that is not found? Dead link of something not available anymore? – kissu Oct 11 '22 at 11:08
  • @kissu added an example that should hopefully clarify it. Could be for any reason that the link can be accessed. It's just that from one view I need to show the 404 page without changing the URL. – Marten Oct 11 '22 at 11:56
  • But isn't it the default behavior already? Didn't used the vanilla vue-router lately but for me, if you arrive on a given route that is not caught by the upper one, you will stay in the catch all one. So, if you have the `notfound` at the end, it should keep you on your `/*` path and display the `PageNotFoundView` already. Can't try right now but this may help you figure it out: https://stackoverflow.com/q/63526486/8816585 – kissu Oct 11 '22 at 13:04
  • Did some more digging. [This](https://stackoverflow.com/questions/52966463/change-vue-router-route-without-changing-the-url) post describes my situation better. – Marten Oct 11 '22 at 15:20

0 Answers0