history api刷新的一个小疑问

Question

因为是想自己根据history-api做一个简单的demo，如图所示，就是第一次进来和点击各种导航的时候会正确显示，但是一旦点击刷新按钮就会提示找不到这个页面。不知道有没有人知道怎么避免这个问题。

我知道为什么会这样，但是我不知道怎么解决。
我试过用'#'，但是用#的话我觉得没把history-api用正确。

Answer 1

你知道为什么会这样，所以你应该只到用#是没用的。
这是因为url为路由，刷新页面时浏览器通过这个Url到后端拿资源拿不到。所以解决问题的方法放在后端，增加请求拦截。

在后端如何解决，简单说个例子吧。

假如入你的路由url为http://127.0.0.1/demo1/about，浏览器刷新时，后端进入请求拦截，拦截确认是history模式，然后将request的url重定向/，而后返回。
浏览器从/请求页面，然后页面中的js发现url匹配路由/demo1/about，而后js渲染页面。

可以参考Vue-router里的 connect-history-api-fallback 中间件实现。