前端路由

一、前端路由概述

前端路由可以实现在不重新加载整个页面的情况下，通过改变URL来切换网页内容。前端路由实现的方法为：监听URL变化，根据不同的URL匹配对应的页面组件进行渲染。前端路由有两种模式，一个是Hash模式，一个是History模式。

Hash模式利用URL中#后面的哈希值变化不会触发页面刷新的特性（如https://example.com/#/home），通过window.onhashchange事件监听哈希值变化，进而切换页面视图。History模式利用HTML中的History API 来使页面不刷新的情况下修改URL，通过监听popstate事件来监听URL的变化。

使用hash模式的话，访问http://example.com/#/foo跟访问http://example.com，服务器返回的内容是一致的，服务端不需对http://example.com/#/foo请求做额外的处理，不同的是浏览器对于前者会执行路由操作。使用History模式的话，URL美观一些，中间没有#，但因为没有#，所以访问http://example.com/foo的话相当于是请求/foo的内容，服务端应该对该请求做处理（可以返回跟请求http://example.com/一样的内容），否则浏览器会显示404。

总结：使用hash模式不需要服务端额外的处理，但是#影响URL美观。使用History模式的话服务端需要对路由URL进行处理，而且History模式兼容性不如hash模式（IE9及其以下版本浏览器不支持History）。

主流前端框架里都包含了实现前端路由的功能库，如react-router-dom、vue-router、angular/router。

二、前端路由的应用

1、如下所示，电商网站的首页、购物车、我的这些不同页面的内容以"组件"形式存在，如vue组件、react组件，路由切换时，通过JS来切换组件的展示，避免了页面切换带来的割裂感。

2、前端路由实现"菜单栏（Tab栏） + 主内容区"的联动，点击菜单时仅更新主内容区。

3、通过路由守卫（如vue的beforeEach）实现权限校验，比如普通用户访问/admin页面的时候，提示无权限。如下所示，未登录用户访问/profile页面时，自动跳转到/login页面。

4、实现URL状态保存

通过前端路由将状态保存到URL中，就能解决上面这些问题：当用户修改状态的时候，更新URL参数；加载URL的时候，解析参数，根据参数来加载或请求（refesh()）对应的数据。

URL状态保存主要有两种形式，一种是查询参数形式（?key=value），一种是动态路由参数形式（/path/:param）。

①、查询参数形式举例：

a、你在电商网站https://jd.com/products页面筛选了手机→价格2000-3000→按评分排序，前端路由将这些筛选条件加到URL中，那么此时URL会变成https://jd.com/products?type=phone\&price=2000-3000\&sort=score，你复制这个URL给你的朋友让他打开（或者你自己执行刷新页面操作），前端路由读取URL中的参数，执行相应的筛选操作，展示你前面筛选后的页面。

b、一个用户分页列表展示页面，点击第5页的时候，前端路由将URL更改为https://example.com/user?page=5\&size=10（size表示每页10条），你点击刷新页面，前端路由读取page=5参数，然后页面显示第5页内容，而不是默认的第1页。

②、动态路由参数形式举例：

一个网站的注册流程有3步：填写基本信息-验证手机-设置密码，前端路由可以用动态参数记录当前步骤，例如第1步的URL为https//example.com//register/step1，第2步的URL为https//example.com//register/step2，第3步的URL为https//example.com//register/step3，当用户在第2步刷新页面时，前端路由根据step2参数，自动展示第2步的表单内容（配合本地存储还能恢复已填内容）。