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模式的一个坑吧。
那有什么办法解决呢,本人想到的办法,有其它更好想法的,欢迎在下面留言
需要有分享链接的页面,可以定义特殊的query参数,由nginx或apache接收query参数后,在Location里返回hash部分 http://domain.com/path/to?hash=/fragment
=> Location: https://domain/path/to#/fragment
没错,HSTS
就是HTTP Strict Transport Security
。这里是MDN的具体文档。服务器设置如下头部,浏览器就会强制使用https来访问,而不用需要额外发送一次http接收301定向了
add_header strict-transport-security max-age=31536000;
可以在这里试了下不同浏览器http的301带hash跳转