前端路由

一、前端路由概述

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

相关推荐
silent_missile3 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
IT_陈寒1 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
少年阿闯~~2 小时前
HTML——1px问题
前端·html
Mike_jia3 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang3 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构
VincentFHR4 小时前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭4 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化
面向星辰4 小时前
css选择器(继承补充)
前端·css
koooo~4 小时前
Vue3中的依赖注入
前端·javascript·vue.js
huuyii4 小时前
Nest 基础知识
前端