前端路由
- 什么是路由：地址栏的变化、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重新请求页面，但是难免遇到特殊情况：用户在地址栏输入地址并回车，浏览器重新加载应用等；
-
hash模式仅改变hash部分的内容，hash部分不会包含在http请求中：
http://oursite.com/#/user/id//如果重新请求只会发送http://oursite.com/，所以hash模式下遇到根据url请求页面的情况不会有问题 -
history模式会将url修改得和正常请求后端的url一样
http://oursite.com/user/id，在此情况下向后端发送请求，如果后端没有配置对应的user/id路由处理，就会返回404错误 -
⭐️官方推荐的解决方法：在服务端增加一个覆盖所有情况的候选资源：如果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属性供后续使用
网友评论