I have implemented a 404 error page functionality successfully using VueRouter:
const router = new VueRouter({
routes: [
// ...
{
path: '*',
component: NotFound,
name: '404',
meta: {page_title: 'Vuejs&Material Demo | 404 NOT FOUND'}
},
]
});
// ... encountered not found
this.$router.push({name: '404'});
One issue I encountered is that the URL changes as well, whereas I only want the view to change.
I get frustrated when a simple typo leads to redirection to a http://example.com/404, requiring me to retype the URL or rely on browser autofill, both of which are inconvenient.
I'm hoping for a method or logic that can achieve a result similar to this: .
In essence, I want the view to change without altering the URL.
Is there a specific way in Vue or VueRouter to accomplish this?