理解前端路由-Router

    在学习React和Vue中,必须要学会使用的,就是他们的路由,之前一直不懂路由的实现方式,于是专门进行了查询和学习,跟大家分享一下我对路由的一个初步理解。
    首先说一下路由,路由实际上就是一个导航的功能,他给每块内容设置了一个唯一地址(实际上不一定是地址),当我们访问这个地址的时候,路由就会帮我们找到对应的内容进行展示。
    在Vue和react中,路由分为两种,BrowserRouter和HashRouter,下面分别简单介绍下这两种路由。
第一种,BrowserRouter:
    在浏览器中,我们常用的一个功能就是前进和后退,如果我们想看下刚才看的那个网页,只需要点击下后退就可以了,这是为啥呢,这个就是因为浏览器帮助我们记住了我们的观看顺序,不难看出,帮我们记录顺序的,是一个 栈 的数据结构,他就是History,History 对象提供了操作浏览器会话历史的功能,如果我们访问了localhost:8080/login那他就会将/login进行保存。BrowserRouter正是利用了这种机制来进行路由实现的,他会对History栈进行监听,一旦栈内发生变动,他就会进行捕捉,判断当前需要显示哪个地址,而再去根据这个地址来显示对应的组件(组件与地址,实际上就是键值对,监听到键的变动,便会去找对应的值)。
但是这种方式存在弊端,因为每个浏览器他的History实现可能不同,所以这种方式他的兼容性不是很好。
第二种,HashRouter:
    HashRouter与BrowserRouter的实现效果是一样的,同样也是监听和键值对来实现路由,但是不同的是HashRouter监听的不是History栈,而是直接监听的地址,不同的地址生成不同的hash值,当hash值发生改变时去寻找对应的组件。
这种方式应为他不依赖与浏览器,所以兼容性极佳,也是大家常用的一种方式。
当然也有缺点,就是不是很美观,他就是我们常见的带有#的地址,如:localhost:8080/#/login
以上,如果有理解错误的地方,欢迎大佬指教。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值