無論單頁還是多頁，我的實現思路是總體配置404頁面的思路就是在前端路由表中新增乙個 path: '/404' 的路由，渲染相應的404頁面。這篇文章主要介紹了vue單頁及多頁應用全域性配置404頁面實踐,需要的朋友可以參考下
前後端分離後，控制路由跳轉的責任轉移到了前端，後端只負責給前端返回乙個html文件以及提供各種介面。下面我們用作例子的兩個專案，均採用vue作為基礎框架，乙個是spa應用，另乙個是多頁應用，均由前端進行路由控制及渲染的。
總體思路
無論單頁還是多頁，我的實現思路是總體配置404頁面的思路就是在前端路由表中新增乙個 path: '/404' 的路由，渲染相應的404頁面。同時，配置乙個規則，當在使用者可訪問的路由表中的所有路由都無法匹配的時候，自動跳轉重定向至該404頁面。下面來說一下針對單頁和多頁，我不同的實現方式。
spa的404路由配置
單頁應用配置404頁面，也區分兩種情況：
路由表固定的情況
如果spa的路由表是固定的，那麼配置404頁面就變得非常的簡單。只需要在路由表中新增乙個路徑為 404 的路由，同時 在路由表的最底部 配置乙個路徑為 * 的路由，重定向至404路由即可。
（由於路由表是由上至下匹配的，一定要將任意匹配規則至於最底部，否則至於此路由規則下的路由將全部跳轉至404，無法正確匹配。）
// router.js
export default new router(,
],})
複製**
路由表動態生成的情況
路由表是動態生成的情況下，也就是說路由表分為兩部分，一部分為基礎路由表，另一部分是需要根據使用者的許可權資訊動態生成的路由表。
本專案中動態生成路由採用vue-router自帶的addroutes方法，該方法是會將新的路由規則在原路由表陣列的尾部注入的。由於任意匹配重定向至404頁面的規則必須至於路由表的最底部，所以此處我將重定向至404頁面的規則抽出，在動態路由注入後，再注入重定向規則，以確保該規則至於路由表最底部。
// router.js
export default new router(,
// ...other codes
],})
// notfoundroutermap.js
export default [,},
]// main.js
//...other codes
router.beforeeach((to, from, next) => ).then(() => )
})} else
} else
}).then(res => else
}).catch(err => )
複製**
多頁應用的404路由配置
多頁應用區別於spa的不同點是每個頁面有自己的一套路由，並且每個頁面可能有自己的一套404頁面風格，當然也可能沒有。這時候，就不能再採用動態新增路由規則的方法了。
我採用的方案是在全域性導航守衛beforeeach中對路由匹配的情況進行判斷，這時候就需要用到vue導航守衛中的 matched 陣列了。如果沒有乙個匹配上的，那麼就重定向至404頁面。當然，這個404頁面也單獨設定為乙個頁面。
// permission.js
//...other codes
router.beforeeach((to, from, next) => ).then(res =>
if (res) else
}).catch(err => )
複製**
這個方案就允許每個頁面有自己的404頁面路由規則，並且為沒有配置404頁面的路由統一配置了預設的404頁面，感覺還是比較友好的。
總結
單頁應用和多頁應用
每一次頁面跳轉的時候，後台伺服器都會給返回乙個新的html文件，這種型別的 也就是多頁 也叫做多頁應用。為什麼多頁應用的首屏時間快？首屏時間叫做頁面首個螢幕的內容展現的時間，當我們訪問頁面的時候，伺服器返回乙個html，頁面就會展示出來，這個過程只經歷了乙個http請求，所以頁面展示的速度非常快。為...
單頁應用 vs 多頁應用
web專案可分為單頁應用 和 多頁應用。單頁應用，就是只有乙個頁面，其他內容，估計就是動態載入，用從載入其他頁面片段 請求後台 這種方式來完成。這麼一說，我之前做的，其實都是多頁應用。相比之下，單頁應用的優勢是什麼呢？1 頁面切換非常快，不會出現白屏，還可以作出過渡效果 2 公用的js和css一次性...
6 4 多頁應用與單頁應用
每一次頁面的跳轉，後端都會返回乙個新的html檔案 首屏 頁面首個螢幕的內容展現出來的時間，因為訪問頁面的時候，伺服器返回html，然後頁面就會被展示出來，這個過程只經歷了乙個http請求，所以頁面展示的速度非常快 搜尋引擎是可以識別html中的內容的，而我們每乙個頁面，所有的內容都放在html中 ...