在Vue和Vue路由器SPA中，顯示404找不到資源

我在SPA中使用Vue和Vue路由器。在一個視圖組件中，我查詢資源的存儲庫。如果資源沒有找到，我想顯示一個404頁面，同時保持URL。在Vue和Vue路由器SPA中，顯示404找不到資源

I.e.如果我訪問/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) 
    }) 
}

本質上，它可能會涉及與NotFoundPage更換FooShowPage在路由器看來，或者重定向到定義的404頁面，同時保持瀏覽器歷史不變。

來源

2016-07-14 harryg

？我目前正在研究這一點，所提供的答案不適合我，因爲我不知道哪個ID是有效的，直到我從後端API檢索結果 –

您需要爲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-14 14:24:47 Leo

在Vue和Vue路由器SPA中，顯示404找不到資源

回答

相關問題