面试官想听到什么答案呢？
1、为什么会出现前端路由。
2、前端路由解决了什么问题。
3、前端路由实现的原理是什么。
1、为什么会出现前端路由。
传统页面：
-
整个项目都是 DOM 直出的页面（简单说就是在浏览器输入网址后发起请求，返回来的 HTML 页面是最终呈现的效果，那就是 DOM 直出。） - 每次加载页面(每次点击页面跳转)，都会重新请求 HTML 资源,返回 HTML 资源以及里面的 CSS 等静态资源，组合成一个新的页面。
单页面
时代在进步，科技在发展，面对日益增长的网页需求，网页开始走向模块化、组件化的道路。随之而来的是代码的难以维护、不可控、迭代艰难等现象。面临这种情况，催生出不少优秀的现代前端框架，首当其冲的便是 React 、 Vue 、 Angular 等著名单页面应用框架。
运用这些单页面框架之后， HTML 页面基本上只有一个 DOM 入口，所有的页面组件，都是通过运行app.js 脚本，```挂载到 <div id="root"></div> 这个节点下面
既然单页面是这样渲染的，那如果我有十几个页面要互相跳转切换，咋整！！？？这时候 前端路由 应运而生，它的出现就是为了解决单页面网站，通过切换浏览器地址路径，来匹配相对应的页面组件。
原理
前端路由 会根据浏览器地址栏 pathname 的变化，去匹配相应的页面组件。然后将其通过创建 DOM 节点的形式，塞入根节点 <div id="root"></div> 。这就达到了无刷新页面切换的效果，从侧面也能说明正因为无刷新，所以 React 、 Vue 、 Angular 等现代框架在创建页面组件的时候，每个组件都有自己的 生命周期 。
总结
什么是前端路由？简单说就是前端控制页面跳转,而不需要要向后端去请求。为什么用前端路由？还不是因为时代在进步，单页应用的兴起，当然兴起的原因就不细说了。前端路由解决了什么？后台和前端工作更加细化了，后台主要工作就是提供数据，前端负责展示，当然还有一些节约资源，减小服务器压力什么的。
网友评论