A little question about history api refresh

because I want to make a simple demo, according to history-api, as shown in the figure, it will display correctly when you enter and click on various navigation for the first time, but once you click the Refresh button, you will not be able to find this page. I wonder if anyone knows how to avoid this problem.

I know why this happens, but I don"t know how to solve it.
I tried to use"- sharp", but I don"t think I used history-api correctly if I used-sharp.


you know why this happens, so you should only use-sharp is useless.
this is because the url is routed, and the browser cannot get the resources through this Url to the backend when the page is refreshed. So the solution to the problem is on the back end, adding request interception.

Let me give you a simple example of how to solve the problem at the back end.

if your route url is http://127.0.0.1/demo1/about, when the browser refreshes, the backend enters request interception, which confirms that it is in history mode, and then redirects the url of request to / , and then returns. The
browser requests the page from / , and then the js in the page finds that the url matches the route / demo1/about , and then js renders the page.

can refer to connect-history-api-fallback middleware implementation in ide/essentials/history-mode.html-sharp%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90" rel=" nofollow noreferrer "> Vue-router .

Menu