Change view/component but not url

Question

I'm working in a 404 error page functionality, I got it to work with:

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

// ... not found something

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

The problem with the above is that the url changes too, but I just want the view (component) to change.

I find very annoying when a simple typo redirects to a http://example.com/404, it makes me type the url again or go from the browser autofill, either way I don't like it.

I was wondering if there is some sort of method/logic to have something like this: https://www.facebook.com/sdfsd/sfsdf/asfasfsafastgtgregre .

Bottom line, I want for the view to change but not the url.

Is there any vue/vue-router way to do this?

thanksd · Accepted Answer · 2017-11-03 17:58:58Z

2

This is a little hacky, but you could update the route via the router's history object's updateRoute method:

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

answered Nov 3, 2017 at 17:58

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change view/component but not url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related