前端路由 & 实现原理

前端路由

• 什么是路由：地址栏的变化、URL到函数的映射

后端路由：又称服务器路由，服务器接收前端发来的http请求后，会根据url找到相应的映射函数，然后执行函数，并将返回值发回给客户端。对于静态资源来说，映射函数就是一个文件读取操作；对于动态资源，映射函数可能是一个数据库读取操作，或者是数据处理操作；根据读取的数据，在服务端使用相应的模板来渲染页面，再返回渲染完毕的页面【⚠️这是早期的做法】

如访问http://xxx/about，服务器收到后，解析出/about，寻找到对应的逻辑，程序吧请求交给对应处理逻辑，完成一次路由分发。

• 好处：安全性好、SEO好；

• 缺点：加大服务器压力，不利于用户体验

前端路由：路由的映射函数；当访问不同的路径，会显示不同的页面组件。控制页面跳转

单页应用路由的特点：通过改变url，不会向后端发送新的请求，更新页面视图，所有页面均在客户端渲染

• 更新地址栏，但是不重新请求页面

• 两种模式都是使用浏览器接口实现的，除此之外，vue-router还为非浏览器提供了abstract模式，原理为用一个数组stack模拟出浏览器历史记录栈的功能。

缺点：使用前进后退时会重新发请求，没有合理利用缓存。

• hash：#本身以及后面的字符称为hash，可以通过window.location来获取

  ⚠️a标签和router-link区别，hash模式只关心#后面的路径-

  早期路由实现基于location.hash实现，即#及后面的部分

  • url中的hash只是客户端的一种状态，当向服务器发出请求，hash部分不会被发送；

  • hash值改变，会在浏览器访问历史中增加记录，可以通过浏览器的前进后退控制hash切换

  • 可以通过hashchange事件来监听hash的变化

  • 触发的方式：<a href="#xxx">、location.hash="#xxx"，

    如http://xxx/about，#后面会被服务器忽略，但是JavaScript通过window.location.hash读取到，得到响应逻辑

• history API

  • history.back()、history.forward()、history.go(xx)

  • html5提供了history API，主要有history.pushState(状态对象，标题，URL)、history.replaceState()，可以在不进行刷新的情况下操作历史记录。不同的是，前者是增加历史记录，后者是替换当前历史记录

• 对比：hash兼容性更好；history更正式，可以设置与当前url同源的任意url，路径更美观；基于hash的路由不用对服务器做改动，history的路由要对服务器做相应配置。

  • ⭐️⭐️hash会检测#之后的路径，如果发现一致，不会重新加载，只有但与之前是不一样才会触发记录添加到栈中；history可以反复重新加载同一个页面，pushState也会添加到栈中

  • pushState设置的新url可以与当前url同源的任意url；hash只可修改#后面的部分，所以只可设置与当前同文档的url

  • pushState通过stateObject可以添加任意类型的数据到记录中；hash只可以添加短字符

  • pushState可以额外设置title属性供后续使用

• abstract：非浏览器

• 关于history的一个问题：单页应用的理想场景是，仅在进入应用时加载index.html，后续的网络操作通过ajax完成，不会根据url重新请求页面，但是难免遇到特殊情况：用户在地址栏输入地址并回车，浏览器重新加载应用等；

  1. hash模式仅改变hash部分的内容，hash部分不会包含在http请求中：http://oursite.com/#/user/id//如果重新请求只会发送http://oursite.com/，所以hash模式下遇到根据url请求页面的情况不会有问题

  2. history模式会将url修改得和正常请求后端的url一样http://oursite.com/user/id，在此情况下向后端发送请求，如果后端没有配置对应的user/id路由处理，就会返回404错误

  3. ⭐️官方推荐的解决方法：在服务端增加一个覆盖所有情况的候选资源：如果url匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是App依赖的页面。这样服务器就不会返回404错误页面，因为对所有页面都返回index.html文件。为了应对这种情况，在vue应用里面覆盖所有的路由情况，然后给出一个404页面，或者，如果使用nodejs做后台，可以使用服务端的路由来匹配url，当没有匹配到路由时返回404，从而实现fallback。

- hash & history 前端路由实现方式

更新视图但不重新请求页面”是前端路由原理的核心

模式参数：

vue-router中通过mode来控制路由的实现模式

• mode只是一个标记，mode:history: HashHistory | HTML5History | AbstractHistory;根据history的类别执行相应的初始化操作和监听；VueRouter类暴露的以下方法实际是调用具体history对象的方法（push & replace）

• 初始化history前，会进行校验，浏览器不支持HTML5History（通过suportsPushState变量判断）则强制为hash模式，非浏览器环境为abstract模式

hash模式：

• 改变hash不会重新加载页面，不会被包含在http请求中，指导浏览器动作的

• 为hash的改变添加监听事件：window.addEventListener("hashchange", funcRef, false)

• 每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录

• $router.push() --> HashHistory.push() --> History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

• replace()方法与push()方法不同之处：不是直接对window.location.hash进行赋值，而是调用window.location.replace方法将路由进行替换

• 监听地址栏：我们可以通过输入URL访问，因此要添加路由监听并触发响应行为 通过setupListeners实现

setupListeners () {
     window.addEventListener('hashchange', () => {
     if (!ensureSlash()) {
     return
     }
     this.transitionTo(getHash(), route => {
     replaceHash(route.fullPath) // 相当于调用了replaceHash
     })
     })
    }

history模式：

History interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

新的方法：pushState(), replaceState()对浏览器历史记录栈进行修改：

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

代码结构以及更新视图的逻辑与hash模式基本类似，只不过将对window.location.hash直接进行赋值window.location.replace()改为了调用history.pushState()和history.replaceState()方法。

abstract模式：

原理为用一个数组stack模拟出浏览器历史记录栈的功能。

history VS hash

• ·pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

• pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中

• pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串

• pushState可额外设置title属性供后续使用