如何使用vue-router在vuejs中創建404組件

Question

vuejs是新手，我正在使用vue工作我的第一個項目。我只是想知道當找不到請求的URL時，我將如何路由到我的404.vue組件。

任何想法？

Answer 1

有幾個方法可以做到這一點。

最通用的一種是檢查路徑是否匹配任何路線，然後重定向到未找到頁面。

router.beforeEach((to, from, next) => { 
    if (!to.matched.length) { 
    next('/notFound'); 
    } else { 
    next(); 
    } 
}); 

參見JSFiddle。

Answer 2

對於我所做的是我給一個http-found類的父div所有我的組件和我裝載掛鉤的App.vue我檢查使用jQuery或Javascript，如果有任何元素類http-found如果不是我重定向到我的404頁面。

App.vue

mounted(){ 
    if(!$('.http-found')){ 
    this.$router.push('/404') 
    } 
} 

Answer 3

在路由聲明，我想補充一點：

[ 
    ... 
    { path: '/404', component: NotFound }, 
    { path: '*', redirect: '/404' }, 
    ... 
] 

這將意味着，如果用戶導航到不匹配任何路線的路徑，它會被重定向到「404」路由，它將包含「未找到」消息。

我把它分成兩條路由的原因是，當你需要的某些數據不能解決時，你也可以通過編程的方式將用戶導向404路由。

舉例來說，如果你正在創建一個博客，你可能有這樣的路線：

{ path: '/posts/:slug', component: BlogPost } 

這將解決，即使所提供的鼻涕蟲實際上還不能獲取任何博客文章。爲了解決這個問題，當你的應用確定後沒有被發現，做

return this.$router.push('/404') 

或

return router.push('/404') 

，如果你不是在Vue公司組件的上下文。

但有一點需要記住的是，處理找不到響應的正確方法不僅僅是提供錯誤頁面 - 您應該嘗試向瀏覽器提供實際的HTTP 404響應。如果用戶已經在單頁面應用程序中，那麼您不需要這樣做，但是如果瀏覽器將該示例博客文章作爲其初始請求，則服務器應該返回404代碼。