前后端分離后，控制路由跳轉(zhuǎn)的責(zé)任轉(zhuǎn)移到了前端，后端只負(fù)責(zé)給前端返回一個(gè)html文檔以及提供各種接口。下面我們用作例子的兩個(gè)項(xiàng)目，均采用vue作為基礎(chǔ)框架，一個(gè)是SPA應(yīng)用，另一個(gè)是多頁應(yīng)用，均由前端進(jìn)行路由控制及渲染的。

總體思路

無論單頁還是多頁，我的實(shí)現(xiàn)思路是總體配置404頁面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由，渲染相應(yīng)的404頁面。同時(shí)，配置一個(gè)規(guī)則，當(dāng)在用戶可訪問的路由表中的所有路由都無法匹配的時(shí)候，自動(dòng)跳轉(zhuǎn)重定向至該404頁面。下面來說一下針對單頁和多頁，我不同的實(shí)現(xiàn)方式。

SPA的404路由配置

單頁應(yīng)用配置404頁面，也區(qū)分兩種情況：

路由表固定的情況

如果SPA的路由表是固定的，那么配置404頁面就變得非常的簡單。只需要在路由表中添加一個(gè)路徑為 404 的路由，同時(shí) 在路由表的最底部 配置一個(gè)路徑為 * 的路由，重定向至404路由即可。

（由于路由表是由上至下匹配的，一定要將任意匹配規(guī)則至于最底部，否則至于此路由規(guī)則下的路由將全部跳轉(zhuǎn)至404，無法正確匹配。）

// router.jsexport default new Router({ mode: 'history', routes: [ // ... { name: '404', path: '/404', component: () => import('@/views/notFound.vue') }, { path: '*', // 此處需特別注意至于最底部 redirect: '/404' } ],})

路由表動(dòng)態(tài)生成的情況

路由表是動(dòng)態(tài)生成的情況下，也就是說路由表分為兩部分，一部分為基礎(chǔ)路由表，另一部分是需要根據(jù)用戶的權(quán)限信息動(dòng)態(tài)生成的路由表。

本項(xiàng)目中動(dòng)態(tài)生成路由采用vue-router自帶的addRoutes方法，該方法是會將新的路由規(guī)則在原路由表數(shù)組的尾部注入的。由于任意匹配重定向至404頁面的規(guī)則必須至于路由表的最底部，所以此處我將重定向至404頁面的規(guī)則抽出，在動(dòng)態(tài)路由注入后，再注入重定向規(guī)則，以確保該規(guī)則至于路由表最底部。

// router.jsexport default new Router({ mode: 'history', routes: [ // ... { name: '404', path: '/404', component: () => import('@/views/notFound.vue') }, // ...other codes ],})// notFoundRouterMap.jsexport default [ { name: '404', path: '/404', component: () => import('@/views/notFound.vue') }, }, { path: '*', redirect: '/404' }]// main.js//...other codesrouter.beforeEach((to, from, next) => { new Promise((resolve, reject) => { if (getCookie(tokenName)) { if (!getInfo()) { Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => { store.dispatch('GenerateRoutes', { roles }).then(() => {  // 根據(jù)用戶權(quán)限生成可訪問的路由表 router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問路由表 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由規(guī)則 resolve({ ...to, replace: true }) // 重新加載一次路由，讓路由表更新成功后走下面else的判斷 })  }) } else { // ...other codes } } else { window.location.href = '/login.html' } }).then(res => { if (res) { next(res) } else { next() } }).catch(err => { new Error(err) next(false) })