前端路由是不涉及服务器的,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。
其实前端路由要做的就是两点:
在页面不刷新的情况下实现url的变化
捕捉url的变化,根据url更改页面内容
提到路由,大家一般会想到生活中常见的路由器,路由器主要用于连接多个逻辑上分开的网络,逻辑网络代表-个单独的网络或者一个子网,可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引人了路由的概念,因此,我们先来对程序开发中的路由进行简单地了解。
程序开发中的路由分为后端路由和前端路由,下面我们分别进行简要介绍。
1. 后端路由
后端路由通过用户请求的URL分发到具体的处理程序,浏览器每次跳转到不同的URL都会重新访问服务器。服务器收到请求后,将数据和模板组合,返回HTML页面,或者直接返回HTML模板,由前端JavaScript程序再去请求数据,使用前端模板和数据进行组合生成最终的HTML页面。下图演示了后端路由的工作原理。
2. 前端路由
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。前端路由和后端路由的原理是类似的,但是实现的方式不一样。对于单页面应用(Single Page Application, SPA)来说,主要通过URL中的hash(#号)来实现不同页面之间的切换。hash有一个特点,就是HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash来实现。
下图演示了前端路由的工作原理。
在上图中,index.html 后面的‘#home”是hash方式的路由,由前端路由来处理,将hash值与页面中的组件对应,当hash值为“#/home” 时,就显示“首页”组件。前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已,没有和服务端交互,所以不存在网络延迟,提升了用户体验。
区别在于express是服务器端的路由,也就是说需要向后台服务器发送请求,然后服务器来决定来render那个.html,这也就是最早的mvc架构模式,而前端的路由是将这一过程放在浏览器端,也就是前台写js代码控制,不在请求服务器,前台一般利用histroy和hash来控制,达到不刷新页面可以使显示内容发生变化,这样好处是js代码不发生变化(浏览器端可以维护一个稳定的model);一般单页应用就是前台来控制路由,这样速度更快,用户体验更好。单页应用还将模板拿到了浏览器端,从而解放了服务端,服务端趋于服务化。欢迎分享,转载请注明来源:夏雨云
评论列表(0条)