In Vue and Vue Router SPA, showing 404 for a not found resource
<p>I'm using Vue and Vue Router in a SPA. In a view component I query a repository for a resource. If the resource is not found I want to show a 404 page whilst keeping the URL. </p>

<p>I.e. if I visit <code>/foo/non-existant-id</code> then a 404 page should be shown in place of the show page for the <code>foo</code> resource.</p>

<p>For clarity here is my router map:</p>

<pre><code>router.map({
  '/foo/:id': {name: 'foo-show', component: FooShowPage},

  // Utilities
  '/': { name: 'home', component: HomePage },
  '*': { name: '404', component: NotFoundPage }
})
</code></pre>

<p>And in my <code>FooShowPage</code> I do the following:</p>

<pre><code>ready () {
  // fetch the foo from the repo (app.foos)
  app.foos.fetchById(this.$route.params.id).then(foo =&gt; {
    this.foo = foo
  }).catch(e =&gt; {
    // foo is not found show a 404 page
    // using this.$route.router.go({name: '404'}) does not work as route is a wildcard 
    console.warn(e)
  })
}
</code></pre>

<p>Essentially it would probably involve replacing the <code>FooShowPage</code> in the router view with <code>NotFoundPage</code>, or redirecting to a defined 404 page whilst keeping the browser history untouched.</p>