history模式是新增的api,改模式下主要有两个方法在起作用(pushState与replaceState),这两个方法都可以使得浏览器路径改变,但不刷新页面,浏览器不会去加载相应的页面,也不会去检查该路径的页面是否存在。
就因为这个特性使得我们在路由跳转时,路径改变了,其实并没有加载页面,当我们刷新的时候就会暴露我们的资源在服务器上找不到,因为vue-router设置的路径不是真实存在的路径。
在服务端nginx 进行配置
location ~ / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
vue官网说明
不同的历史模式 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/guide/essentials/history-mode.html