4

SPA で Vue と Vue Router を使用しています。ビュー コンポーネントで、リソースのリポジトリをクエリします。リソースが見つからない場合は、URL を保持したまま 404 ページを表示したいと考えています。

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

わかりやすくするために、ここに私のルーターマップを示します。

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

基本的にはFooShowPage、ルーター ビューの を に置き換えるNotFoundPageか、定義された 404 ページにリダイレクトする一方で、ブラウザの履歴はそのままにしておく必要があります。

4

3 に答える 3

6

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

于 2016-07-14T14:24:47.547 に答える