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

teal-front發表於2018-06-14
Vue模式

前言

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

相關文章