vue-router原理

说简单点,vue-router的原理就是监听URL地址变化,从而渲染不同的组件。

vue-router的模式主要有hash模式和history模式。

1.hash模式的原理(url带有#号部分):
    在vue-router.js的2.8版本之前,在路由的hash部分发生了任何变化,都会执行window.onhashchange方法,在这个方法内部我们可以根据当前匹配到的hash去加载对应的组件
    在vue-router.js的2.8版本之后,内部使用window.history.pushState来完成相应的功能
    hash模式的特点:在切换路由的时候,不会向服务器发送请求,但是刷新网页的时候,此时会向服务器发送请求,在向服务器发送请求的时候,hash部分的信息是不会发送到服务器的,所以此时刷新网页没有问题
            

   localhost:8888        --->加载spa单页面应用程序

   localhost:8888#index  --->当localhost:8888切换到localhost:8888#index 没有发送请求
   localhost:8888#login  --->当localhost:8888#index切换到localhost:8888#login 没有发送请求     
   localhost:8888#login  --->当我们直接刷新浏览器的时候,此时会向服务器发送请求,但是我们请求url的中hash部分不会提交到服务器,所以真正的请求地址是localhost:8888,就相当于此时重新去加载spa单页面应用程序

2.history模式的原理(url中通过/表示路径)
    内部使用window.history.pushState来处理url的变化,切换对应的组件
    history模式的特点:在切换路由的时候,不会向服务器发送请求,但是当刷新网页的时候,此时会向服务器发送请求,如果后端没有对应的接口与此匹配,此时会报资源找不到的错误
history模式一般情况下不能刷新网页

    localhost:8888    --->加载spa单页面应用程序
    localhost:8888/index --->当localhost:8888切换到localhost:8888/index没有发送请求
    localhost:8888/login --->当localhost:8888/index切换到localhost:8888/login没有发送请求

    localhost:8888/login  --->当我们直接刷新浏览器的时候,此时会向服务器发送请求,请求地址就是localhost:8888/login,所以如果服务器没有对应的/login接口,那么此时会报404错误

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值