Change view/component but not URL

Question

I’m working on a page 404, work well, I have the following:

const router = new VueRouter({ 
  routes: [
        // ... 
        {
            path: '*',
            component: NotFound,
            name: '404',
            meta: {page_title: '404 NOT FOUND'}
        },
    ]
});

// ... alguma coisa 'not found'

this.$router.push({name: '404'});

The problem with this is that the URL changes too, but I just want the view/component to change, and the URL to remain.

I find it very annoying to be redirected to http://example.com/404, if I’m wrong about something I have to type the whole url or go through the browser Autofill, I don’t like it anyway.

I was wondering if there’s any method/logic for you to have something like https://www.facebook.com/sdfsd/sfsdf/asfasfsafastgtgregre.

In short, I want the view/component to change but not the URL, in case it falls on the route configured above (404).

Is there any way/built-in to do this with Vue/Vue-router, or a workaround?

Answer 1

I also made this question in so en, and the answer I got was this, it turns out, although I don’t know if it’s 'well done':

let route = this.$router.match({ name: '404' });
this.$router.history.updateRoute(route);

Instead of this.$router.push({name: '404'});

Answer 2

puts a preventdefault(), so it won’t redirect.