博客地址：https://ainyi.com/69
三月來了，春天還會遠嗎、、
在這里，隆重宣布本博客告別 Vue 傳統的 hash 路由，迎接好看而優雅的 history 路由~~
映照官方說法
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面
export default new Router({
mode: 'history',
routes: [...]
)}
當使用 history 模式時，URL 就像正常的 url，例如 https://ainyi.com/about，好看又優雅！
不過這種模式要玩好，還需要后台配置支持。因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接訪問 https://ainyi.com/about 就會返回 404，因為后端沒有 /about 相應的攔截器，自然 404
所以，要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是 app 依賴的頁面
后端實現
本博客后端使用的是 java 的 ssm 框架，原本只做了后端接口，只提供接口
對於諸如 /about 的 url，SpringMVC 的 @RequestMapping() 沒有做映射，自然是報 404 錯誤的
考慮到除了接口，其他訪問的 history 全都是返回 404 頁面，想到一個方法，就是直接做 404 頁面的跳轉轉發，這就解決了 history 路由的問題
就是在 web.xml 中進行 404 頁面的配置跳轉，在 web-app 標簽中配置 error-page
<web-app>
...
<!-- 未匹配到 url 的跳轉頁面，用於 vue history 路由，未匹配的路徑自動轉發到 index.html -->
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
完美，
但又有一個問題出現了，點擊跳轉可以進入二級路由，例如進入了 https://ainyi.com/tag/vue
當點擊刷新的時候，會報一個找不到資源的錯誤，也就是 js 靜態資源沒找到 qaq
這就要前端來解決這個問題
刷新找不到資源
由於之前是使用 hash 路由，npm run build 打包之后，直接打開 index.html 會報找不到資源的情況，這我在之前寫的博客記錄解決方案：https://ainyi.com/47
當時是這么做的：
文件路徑出錯解決：在 config 的 index.js 下 build 的設置：assetsPublicPath: ‘./’,
而如今變成 history 路由，此字段應設置成 assetsPublicPath: ‘/’
原因如下：
'./' 是指用戶所在的當前目錄（相對路徑）
'/' 是指根目錄，也就是項目的根目錄
對於 hash 模式，根路徑是固定的，就是項目的根目錄
但是 history 模式下，以 / 開頭的嵌套路徑會被當作根路徑
所以當使用 './' 引入文件，就會找不到文件了
因為文件本身就是在項目根目錄下的，並不在嵌套 history 的路徑目錄下
設置好之后，重新打包，測試，部署上線，完美解決~
提醒
后端做了 404 頁面自動跳轉到 index.html 之后，服務器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件
為了避免這種情況，應該在 vue-router 里面設置無法匹配正確路由的情況跳轉到前端的 404 頁面
export default new Router({
mode: 'history',
routes: [
// TODO
{
path: '*',
component: () => import('../components/NotFound'),
name: 'NotFound',
meta: {title: '404 - 找不到頁面'},
}
]
)}
博客地址：https://ainyi.com/69