路由的前端原理

前端路由的核心在于改变视图的同时不会向后端发送http请求。而是通过加载对应的路由组件。vue-router就是将组件映射到路由，然后渲染出来。有hash模式 ，history模式与Abstract模式，默认hash模式

hash模式：

基于浏览器的hashchange事件，地址变化时，通过window.location.hash获取地址栏上的hash值。

hash模式的优点：

• hash值会出现在url中，但是不会被包含在http请求中。因此hash值改变不会重新加载页面。

• hash改变会触发hashchange事件，能控制浏览器的前进后退。

hash模式的缺点：

1. 地址栏中携带#，不美观。

2. 只能修改#后的hash值部分。

3. 有体积限制，只能添加短字符串。

4. 设置的新值必须与旧值不一样，才能触发hashchange事件，并记录到栈中。

5. 每次的url的改变不属于http请求，所以不利于seo优化

history模式

基于HTML5新增的pushState和replaceState 两个api，以及浏览器的popState事件，地址变化时，通过window.location.pathname找到对应的组件。

history模式的优点：

• 地址栏更美观

• 浏览器的前进后退能触发浏览器的popState事件，获取window.location.pathname来控制页面的变化

history模式的缺点：

1.url的改变属于http请求。借助history.pushState实现页面无刷新跳转。因此会重新请求服务器，所以前端的url与后端的url一致，不一致的话，匹配不到静态资源，返回404页面。

2.兼容性差，特定浏览器支持

Abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。

根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。