VueおよびVue Router SPAで、見つからないリソースに対して404を表示

Question

SPAでVueおよびVue Routerを使用しています。ビューコンポーネントでは、リポジトリにリソースを照会します。リソースが見つからない場合は、URLを保持しながら404ページを表示します。

I.e. /foo/non-existant-idにアクセスすると、fooリソースの表示ページの代わりに404ページが表示されます。明確にするために

はここに私のルータのマップです：

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

    // Utilities 
    '/': { name: 'home', component: HomePage }, 
    '*': { name: '404', component: NotFoundPage } 
}) 

そして、私のFooShowPageに、私は次のようにします。

ready() { 
    // fetch the foo from the repo (app.foos) 
    app.foos.fetchById(this.$route.params.id).then(foo => { 
    this.foo = foo 
    }).catch(e => { 
    // 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) 
    }) 
} 

は、基本的にそれはおそらくNotFoundPageとルータビューでFooShowPageを置き換える伴うだろう、ブラウザーの履歴を変更しないで404ページにリダイレクトすることができます。

Answer 1

404ページのルートを設定し、一致しないルートをそのルートにリダイレクトする必要があります。私はそのようなことをするために地図の後にrouter.redirectを使います。

router.map({ 
    '/': { name: 'home', component: HomePage }, 
    '/foo/:id': {name: 'foo-show', component: FooShowPage}, 
    '/404': {name: 'not-found', component: NotFound} 
}) 

router.redirect({ 
    '*': '/404' 
}) 

マップに記載されていないすべてのルートは、あなたがこれを解決しました/404