一、前端路由概述
前端路由可以实现在不重新加载整个页面的情况下，通过改变URL来切换网页内容。前端路由实现的方法为：监听URL变化，根据不同的URL匹配对应的页面组件进行渲染。前端路由有两种模式，一个是Hash模式，一个是History模式。
Hash模式利用URL中#后面的哈希值变化不会触发页面刷新的特性（如https://example.com/#/home），通过window.onhashchange事件监听哈希值变化，进而切换页面视图。History模式利用HTML中的History API 来使页面不刷新的情况下修改URL，通过监听popstate事件来监听URL的变化。
总结：使用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）。
①、查询参数形式举例：
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步的表单内容（配合本地存储还能恢复已填内容）。