Implementing Vue and Vue Router in a single page application (SPA) has presented me with a challenge. In one of my view components, I query a repository for a specific resource. If the resource cannot be found, I'd like to display a 404 error page without altering the URL.
For example, if a user visits /foo/non-existant-id, I want to show a custom 404 page instead of the usual content for the foo resource.
To clarify, here is how my router map is set up:
router.map({
'/foo/:id': {name: 'foo-show', component: FooShowPage},
// Utility routes
'/': { name: 'home', component: HomePage },
'*': { name: '404', component: NotFoundPage }
})
In my FooShowPage component, I handle this situation as follows:
ready () {
// Fetch the foo object from the repository (app.foos)
app.foos.fetchById(this.$route.params.id).then(foo => {
this.foo = foo
}).catch(e => {
// If foo is not found, display a 404 page
// Using this.$route.router.go({name: '404'}) does not work because the route is a wildcard
console.warn(e)
})
}
In essence, I am looking for a way to dynamically replace the FooShowPage component with the NotFoundPage in the router view or redirect to a predefined 404 page while preserving the browsing history.