CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Hula Hula
Hula Hula

Reputation: 573

Change view/component but not url

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?

Upvotes: 2

Views: 195

Answers (1)

thanksd
thanksd

Reputation: 55644

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);

Upvotes: 2

Related Questions