路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置,默认就是hash模式
这两种模式各有自己的优势,但他们的使用区别,却多多少少都会在面试当中被问到
今天就一起来学习下
哈希模式(hash)
vue-router默认hash模式,使用url的哈希(hash)来模拟一个完整的URL,当URL改变时,页面不会重新加载
如下所示
http://localhost/#home特点: #号后面的参数不会传送给服务器,兼容性好,不会作为路径的一部分发送给服务器,也就是它不会包括在HTTP请求体中,对后端完全没有影响,只是我们前端同学自己玩
页面刷新时,会停留在当前页面,不会重新加载
如果觉得hash路径很丑,不简洁,我们可以用路由的history模式,这种模式充分利用history.pushState API或replaceState,来完成,url跳转而无需重新加载页面
历史模式
history模式:在实例化配置对象中添加mode模式,值为history就可以了的 经过改造后,hash模式就会变成history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})这两种方式的使用都是没啥问题的,如果你在意浏览器url的颜值,#符号掺杂在url里看起来确实有些不优雅
如果你想url更好看,那么就使用history模式
但是:在hash模式下,使用hash符号之前的内容会被包含在请求体中,#号后面的不会发送给服务器
而history模式下,前端的URL必须和实际向后端发起请求的URL保持一致
如:https://itclan.cn/fontend/id,如果后端缺少没有对/fontend/id的路由处理,那么它将返回404错误
如果你想要支持history模式,那么需要后端同学支持,想要彻底解决404的问题,需要与后端同学协商,因为需要后端与前端路由做匹配
在服务端增加一个覆盖所有情况的时候的候选资源,如果url匹配不到任何静态资源,应该返回一个首页页面
如果出现404,容易让用户觉得这是一个Bug
