Published on

前端路由

Authors

前端路由是什么？

前端路由能让浏览器不重新加载整个页面的条件下，通过改变 url 展示不同的组件，从而实现页面跳转的全前端（JavaScript）控制，是 SPA 的基础

为什么要有前端路由？

  1. 传统后端路由，在跳转后会先白屏，等接口重新返回 html 后，才能正常展示，前端路由可以实现"无缝切换"
  2. 降低了服务端压力，无需每个页面都重新请求页面资源(CSS/JS)
  3. 支持复杂应用交互，比如音乐播放器，在路由跳转后，还要保留当前的状态（比如音乐播放中）

怎么实现？

  1. Hash 路由，在 url 上可以看到 # ，依赖于 hashchange 事件的监听和触发。适合静态部署或兼容旧浏览器的项目
  2. History 路由，依赖于 popstate 事件的监听（仅浏览器前进/后退触发），以及 history.pushState() 方法更新 url（注意不会触发 popstate，需手动拦截<a>标签点击，并更新UI） ，需要服务端配置支持(浏览器直接访问/home等路径会向服务器发送请求，若未配置统一回退根页面，则返回404错误。Nginx 服务端需将所有路由指向入口HTML文件)，URL更简洁，适合现代浏览器"

最佳实践？

  1. 强制页面刷新的时候，会重置页面状态（如表单输入），但URL保留；前端路由库需通过sessionStorage或重新匹配路由恢复组件状态，而浏览器历史栈的URL记录确实存在
  2. 路由的命名必须清晰明了
  3. 结合鉴权使用时，严格区分需鉴权路由（个人文档页）和非鉴权路由（比如登录页，活动查看页）
  4. 状态保留​：避免用window.location.reload()强制刷新，可使用路由库的“导航守卫”在跳转前保存数据
  5. 错误处理：为无效URL设置兜底页面（如404页），提升用户体验
  6. 懒加载优化：通过Webpack等工具将不同页面代码打包为独立文件，访问时再加载，减少初始负载量，提升首屏速度（如Vue中的() => import('./views/Home.vue')）
View on GitHub