说起前端路由,下面这两种大家应该都比较熟悉了,
- hash
- history
hash
hash这块应该比较古老的,但是也有比较多的问题
- hash部分后台无法从url 获取
- 对于锚点会出现冲突
- 服务器端无法准确跟踪前端路由信息
history
今天主要说下history, 上图
图上清晰的展示了地址栏里面的url 变化,最后我刷新页面之后404的问题。
window.addEventListener('popstate', function (event) {
console.log('location: ' + document.location);
console.log('popstate: ' + JSON.stringify(event.state) + ':' + history.length);
if (!event.state) {
// let tm = Date.now();
// history.replaceState({tm: tm}, "title" + tm, '/' +tm);
}
})
window.addEventListener('click', function () {
let tm = Date.now();
history.pushState({tm: tm}, "title" + tm, '/' +tm);
// history.pushState({tm: tm}, "title" + tm, '/history.html?a=' +tm)
})
原因是虽然这个时候把url改变了,由于是纯前端的业务,并没有对应后台的路由映射,刷新之后直接404了
vue-router的方案
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
nginx 配置方案
location / {
try_files $uri $uri/ /index.html;
}
完美成功解决