Open yixiaosi1314 opened 3 years ago
1.hash路由在地址栏URL上有#，而history路由没有会好看一点
hash路由 121.0.0.1:80/test/index.html#/a/b
history路由 121.0.0.1:80/a/b
2.进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了（刷新是网络请求，没有后端准备时会报错）。
3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。
(1) 只需要前端配置路由表, 不需要后端的参与 (2) 兼容性好, 浏览器都能支持 (3) hash值改变不会向后端发送请求, 完全属于前端路由
(1) hash值前面需要加#, 不符合url规范,也不美观
(1) 符合url地址规范, 不需要#, 使用起来比较美观
(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误 (2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
hash路由和history路由的区别：
1.hash路由在地址栏URL上有#，而history路由没有会好看一点
hash路由 121.0.0.1:80/test/index.html#/a/b
history路由 121.0.0.1:80/a/b
2.进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了（刷新是网络请求，没有后端准备时会报错）。
3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。
hash路由和history路由优缺点：
hash模式:
优点:
(1) 只需要前端配置路由表, 不需要后端的参与 (2) 兼容性好, 浏览器都能支持 (3) hash值改变不会向后端发送请求, 完全属于前端路由
缺点:
(1) hash值前面需要加#, 不符合url规范,也不美观
history模式:
优点:
(1) 符合url地址规范, 不需要#, 使用起来比较美观
缺点:
(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误 (2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
总结: 一般情况下两种路由的模式都可以使用, 具体的使用场景可以结合以上两种模式的优缺点进行选择.