从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