说简单点,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错误