【面试题】前端路由分类

0. 前言

在Web开发中，路由是指根据用户请求的URL地址，确定用户访问的页面资源、参数等，是前端开发中不可缺少的重要部分。Vue router中提供了两种路由模式，一种是hash模式，另一种是history模式。

1. Hash模式路由

Hash模式是默认的路由模式。在URL中加入"#"，比如http://www.baidu.com/#/abc，#后面的内容就是路由地址。Hash模式有一个优点，就是兼容性比较好，因为它不需要后端支持，只要在前端将URL中的#后面的内容进行解析，就能获取到路由信息。当URL的hash部分发生变化时，会触发window.onhashchange事件，它可以用来监听浏览器的返回和前进按钮、手动修改URL的hash部分等操作。

在Web浏览器中，location对象表示当前文档的URL信息。一个典型的hash模式URL地址如下图所示，它由多个部分组成。

location对象的hash属性有以下特点：

• 改变location.hash属性的值不会触发浏览器的页面重新渲染，这是SPA必需的特点。
• hash值变化会触发页面跳转，即浏览器的前进、后退。
• hash模式的路由不会提交到服务端。

2. History模式路由

在History模式下，URL不会像hash模式那样带有#号，而是一个正常的URL，例如：http://www.baidu.com/path/to/page。History模式是通过利用 HTML5 History API 实现的，可以在不刷新整个页面的情况下，动态改变当前URL地址和页面内容。可以通过window.onpopstate来监听路由的变化。

使用History模式需要后端的支持，因为它需要在服务器端进行配置。如果用户直接访问了一个History模式下的URL，而此时后端又没有相应的配置，就会出现404错误。Vue router提供了一个特殊的fallback选项，用于定义在服务器返回404错误页面时，应该返回什么样的页面。常见的做法是将fallback设为单页面应用的主页，以保证用户可以正确访问到页面。

HTML5 History API有如下的属性和方法：

方法/属性	解释
history.pushState()	向历史记录添加一个状态，并改变当前URL
history.replaceState()	用新的状态替换当前状态，不会添加一个新的历史记录条目
history.go()	加载历史记录中的某个特定页面
history.back()	加载历史记录中的前一个页面，相当于点击浏览器的后退按钮
history.forward()	加载历史记录中的下一个页面，相当于点击浏览器的前进按钮
history.length	返回历史记录中的条目数

3. 如何选择路由模式

• to B 的系统推荐用hash，简单易用，对url规范不敏感。
• to C 的系统，可以考虑选择 H5 history，需要服务端支持。
• 需要考虑成本和收益，尽量选择简单的。