1. 浏览器发送请求的流程
1. 浏览器发出请求;
2. 服务器监听到80端口(或443)有请求过来,解析url路径;
3. 根据服务器的路由配置,返回对应的数据;
4. 浏览器根据 Content-type 的类型来解析数据,并渲染在页面上;
在多页面的应用中,在浏览器中切换不同的路径会发送不同的请求并匹配到后端路径上;但是在单页面应用(SPA)应用大范围流行的时候,ajax流行,异步数据请求交互发生在不刷新浏览器的情况下运行,由此推出了前端路由的概念;
2. 前端路由的原理
匹配不同的url路径进行解析,然后动态的渲染出不同的内容,但是当url变化的时候不刷新界面;
hash
14年之前,使用hash的方式
http://www.xxx.com/#/login
# 后面的内容发生变化的时候,不会导致浏览器向服务器请求,hash改变会触发 hashChange,然后监听 hashChange 更新页面内容;
history
14年后,HTML5标准发布,多了两个API:pushState,replaceState,通过这两个API可以改变url地址但是浏览器不会重新发送请求,这种方式浏览器地址的url中不会带有 # 号,但是当用户重新刷新的时候会发送请求,所以需要服务器的支持,把所有的路由都重新定向到根页面;
3. 前端路由在vue中的使用
vue-router
需要注意的时候,在使用history模式的路由时,路由的/路由都会被解析成根路径,会导致出现404的错误,解决办法如下:
// 生产环境下使用相对路径,就是把路由中配置的路径拼接到前面的base路径后面
vue.config.js
module.exports = {
// 基本路径 /pd_tools/ /study_map_tool/
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
}
网友评论