vue-router是vue官方提供的路由管理器,让构建单页面更容易,vue默认hash模式,还有另一种history模式
原理:
hash路由:核心就是依靠hashchange()事件在window监听hash的变化,当#后的hash值变化时,浏览器不会向服务器发送请求,因此就不会刷新页面
通过hashchange()事件来实现切换页面的操作
history路由:主要使用pushState()和replaceState()结合window.popState事件(监听浏览器前进后退)实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改
区别:
- hash模式较丑，history模式较优雅
- pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
- pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
- pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
- pushState可额外设置title属性供后续使用
- hash兼容IE8以上，history兼容IE10以上
- history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误