前端路由

一、前端路由概述  

  前端路由可以实现在不重新加载整个页面的情况下，通过改变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步的表单内容（配合本地存储还能恢复已填内容）。

三、与后端路由的区别 

    比如一个页面中的导航栏有首页和测试页两个跳转链接，默认展示首页（https://www.example.com/）内容，点击测试页的话跳转测试页（https://www.example.com/test）内容。

   使用后端路由：浏览器请求https://www.example.com/，服务端返回首页index.html等资源文件，浏览器收到后进行渲染。点击测试页的时候，页面刷新为https://www.example.com/test，服务端收到对应的请求后返回test.html等资源文件。如果服务端使用的是spring的话，那么通过@GetMapping("/")、@GetMapping("/test")来将不同的URL映射（路由）到对应的处理方法，返回对应的html文件。 

  使用前端路由：浏览器请求https://www.example.com/，服务端返回首页index.html、.js等资源文件（浏览器请求https://www.example.com/test也应该返回相同的资源文件，所以需服务端做相应的处理）。点击测试页的时候，只更改URL为https://www.example.com/test，页面不刷新，浏览器根据URL路由匹配到测试页的内容进行加载（前面服务端返回index.html的时候会将首页和测试页的内容通过js文件返回，js文件中还包含路由逻辑等内容）。服务端返回的js文件中也可以只包含首页的数据内容，点击测试页的时候再去请求测试页的数据内容，这样能提高首页的显示效率。

  前端路由对应单页应用（SPA），它是 “前端主导的局部更新”，适合交互密集型应用，如后台管理、在线文档编辑。SPA模式接近原生 App 的交互逻辑，适合需要兼顾移动端体验的 Web 应用（如微信小程序的 WebView 页面）。SPA 天然适配 “前端负责渲染、后端负责 API” 的分工模式。

  后端路由对应传统的多页应用（MPA）,它是“服务器主导的页面级切换”。MPA的优势是天然的 SEO 友好性（MPA 的每个页面都是独立 HTML，更易被搜索引擎抓取）和独立页面的资源隔离，它适合内容展示性网站，如新闻网站、电商中的商品详情页等。MPA 可仅加载当前页面所需资源，在网络条件较差的环境下，首屏渲染可能比 SPA 更快。

  也可以选择“混合模式”，结合SPA和MPA两者优势，如Next.js（React）、Nuxt.js（Vue），既保留 SPA 的交互流畅性，又通过服务端渲染解决首屏加载慢和 SEO 问题。