前端路由

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

  Hash模式利用URL中#后面的哈希值变化不会触发页面刷新的特性（如https://example.com/#/home），通过window.onhashchange事件监听哈希值变化，进而切换页面视图。History模式利用HTML中的History API 来使页面不刷新的情况下修改URL，通过监听popstate事件来监听URL的变化。主流前端框架里都包含了实现前端路由的功能库，如react-router-dom、vue-router、angular/router。

  前端路由的应用：

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

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

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

  ④、实现URL状态保存   

  通过前端路由将状态保存到URL中，就能解决上面这些问题，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步的表单内容（配合本地存储还能恢复已填内容）。

  URL状态保存实现概述：当用户修改状态的时候，更新URL参数。加载URL的时候，解析参数，根据参数来加载或请求对应的数据。