Vue-router post 404 problem with history mode refresh, vue-router404
Because our application is a single-page client application, when using the history mode, the URL is like a normal url and can be directly accessedhttp://www.xxx.com/user/idBut because the path set by vue-router is not a real path, the 404 error will be returned when you refresh the page.
If you want normal access in history mode, you also need background configuration support. Add a candidate resource on the server that overwrites all situations: If the URL does not match any static resource, the same index.html page should be returned, which is the page on which your app depends.
You can also modify the configuration of a error page on the service end so that it can be directed to index.html.
Warning:
After this is done, your server will no longer return the 404 error page, because the index.html file will be returned for all paths. To avoid this situation, you should overwrite all routing conditions in the Vue application, and then provide a 404 page.
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ]})
This solves the 404 problem after page refreshing.
Problem extension:
However, I found that refresh in IE is still 404. I found the reason on the internet because IE is smart, in ie, the page size <B will be regarded as unfriendly, So ie will replace the webpage with a wrong prompt, and my index.html has only one DIV:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> vue-mdm </title>
</Head>
<Body>
<Div id = "app"> </div>
</Div>
</Body>
</Html>
The solution is to enrich the page so that the size exceeds 1024.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
