從301跳轉看vue-router的hash模式

前言

vue-router的模式默認是hash的，另外還有history和abstract。想要設置爲在這裏

let router = new VueRouter({
    mode: 'history',
    routes: []
})
複製代碼

那默認的hash模式有什麼潛在的弊端呢，直到站點切https時，用到了301的跳轉，從http://domain.com/path/to#fragment跳轉到https://domain.com/path/to#fragment，那服務器是不認hash值的，咱們看301的http response，Location: https://domain.com/path/to，並無#fragment呀，那瀏覽器是自動加上的咯。

問題本質

其實這是一個瀏覽器的Bug，只是後來被修復了而已。這是與HTTP協議無關，與瀏覽器處理有關。

像QQ瀏覽器fork了webkit內核後，後續並無同步修改這個Bug，致使url的hash部分，301跳轉後就丟失了。因此這也算是vue-router設置爲hash模式的一個坑吧。

想辦法解決呀

那有什麼辦法解決呢，本人想到的辦法，有其它更好想法的，歡迎在下面留言

url上帶query參數

須要有分享連接的頁面，能夠定義特殊的query參數，由nginx或apache接收query參數後，在Location裏返回hash部分 http://domain.com/path/to?hash=/fragment => Location: https://domain/path/to#/fragment

添加HSTS

沒錯，HSTS就是HTTP Strict Transport Security。這裏是MDN的具體文檔。服務器設置以下頭部，瀏覽器就會強制使用https來訪問，而不用須要額外發送一次http接收301定向了

add_header strict-transport-security max-age=31536000;
複製代碼

Update: 20180615

能夠在這裏試了下不一樣瀏覽器http的301帶hash跳轉

---

打個廣告

公司如今急招前端開發，座標深圳南山，有興趣的能夠看這裏，直接把簡歷發我郵箱吧。teal.yao@corp.to8to.com