前端 路由的原理

前端路由原理

前端路由的核心，就在于改变视图的同时 不会向后端发送请求；而是加载路由对应的组件

vue-router就是将组件映射到路由，然后渲染出来。并实现三种模式。

Hash模式，History模式以及Abstract模式。 默认为Hash模式

什么是Hash模式，History模式以及Abstract模式？

Hash模式

是指url后面的#号以及字符。hash虽然出现在url中，但是不会被包括在http请求中，对后端完全没有影响，因此改变hash不会被重新加载页面。

History模式

url就像正常的url，不过这种模式要玩好，还需要后台的配置支持。如果后台没有正确的配置，那么用户在浏览器访问时 很容易就会出现跳转到404的尴尬局面。

abstract模式

支持所有的js运行模式。vue-router自身会对环境做校验，如果发现没有浏览器的API，路由会自动强制进入abstract模式。在移动端原生环境中也是abstract模式。

他们各自的原理及优缺点

Hash模式

原理

基于浏览器的hashchange事件，地址发生变化时，通过window.location.hash获取地址上的hash值，并通过router类，配置routers对象设置hash值与对应的组件内容

优点

hash值会出现在url中但不会被包含在请求报文中，它的改变不会重新加载页面

hash会触发hashchange事件，能控制浏览器前进后退

兼容性好

缺点

地址栏中携带# 不够美观，而且只能修改#后的内容只能设置与当前基地址相同的文档

体积有限制 只能添加短字符串

新的值必须与原来不同

不利于SEO优化

History模式

原理

基于浏览器的popstate事件，地址发生变化时，通过window.location.pathname找到对应的组件。并通过router类，配置routers对象设置pathname值与对应的组件内容

优点

没有#，更加美观  

pushState（）设置新的URL可以是与当前URL同源的任意URL，也可以相同，这样会把记录添加到栈中

pushState（）可以通过stateObject参数可以添加任意类型的数据到记录中

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

缺点

URL的改变属于http请求，前端的URL必须与实际向后端发起请求的URL一致

如果两个URL不一致的话，因为匹配不到静态资源，回导致返回404页面。

因此需要后台的配置支持

兼容性差 只适合特定浏览器