前情提要

1.Vue属于单页面应用SPA

什么是单页面SPA

SPA是一种网络应用程序所有与用户交互都是通过动态重写当前页面来实现页面变化在Vue项目中不管我们写多少个路由 最终打包后也只会有一个index.html。
即 单页面就是指整个前端服务中就只有一个index.html前端项目开发完成部署到服务器上之后用户访问的始终是这个静态页面而页面中呈现的所有交互例如页面跳转数据跳转等都是这一个页面中完成的。

而传统的多页面模式每一个页面对应一个html文件当我们刷新页面的时候会主动向后端请求对应的html文件拿到html文件后渲染界面。

两种路由模式 history / hash

1. hash模式
1 hash模式下地址栏中带#路由地址就是#后面的内容切换路由变化的是#后面的内容
2 hash模式下url变化是根据浏览器的hashChange方法监听的
3 hash模式兼容性好 能兼容低版本的IE浏览器
2.history模式
1history模式下的地址栏中没有#视觉上更加美观
2history路由的实现主要依赖于html5提供的全局对象 Interface 中的pushState()方法和replaceState()方法它们提供了对浏览器历史记录进行修改的功能。

history模式下手动刷新页面出现404错误 而hash模式不会出现的原因

hash模式不出现的原因
因为hash模式请求页面的地址永远是#前面的内容所以总能请求成功得到index.html页面在通过路由渲染显示对应的组件 。
换句话说 hash虽然出现在url中但不会包括在http请求中对服务端完全没有影响。而改变hash在hash面膜是中会被haschange方法所捕获在Vue中会触发页面的修改。

为什么history模式下有问题
因为history模式请求页面的地址是地址栏里面全部的内容
例如: http://192.168.30.161:5500/home 在页面不刷新的情况下默认访问的始终是路径下的index.htmlhttp://192.168.30.161:5500/index.html,但一旦刷新页面后访问的就是http://192.168.30.161:5500/home/index.html很明显服务器没有这个资源所以会出现404错误因此使用history模式的路由时需要配置nginx,告诉浏览器当访问的资源不存在时默认访问静态资源下的index.html