博客地址:https://ainyi.com/69html
三月來了,春天還會遠嗎、、前端
在這裏,隆重宣佈本博客告別 Vue 傳統的 hash 路由,迎接好看而優雅的 history 路由~~vue
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL,因而當 URL 改變時,頁面不會從新加載
若是不想要很醜的 hash,咱們能夠用路由的 history 模式,這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面java
export default new Router({ mode: 'history', routes: [...] )}
當使用 history 模式時,URL 就像正常的 url,例如 https://ainyi.com/about,好看又優雅!web
不過這種模式要玩好,還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用,若是後臺沒有正確的配置,當用戶在瀏覽器直接訪問 https://ainyi.com/about 就會返回 404,由於後端沒有 /about 相應的攔截器,天然 404vue-router
因此,要在服務端增長一個覆蓋全部狀況的候選資源:若是 URL 匹配不到任何靜態資源,則應該返回同一個 index.html 頁面,這個頁面就是 app 依賴的頁面npm
本博客後端使用的是 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