美文网首页
74. 前端路由

74. 前端路由

作者: yaoyao妖妖 | 来源:发表于2020-06-09 17:27 被阅读0次

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' ? './' : '/',
}

相关文章

  • 74. 前端路由

    1. 浏览器发送请求的流程 2. 前端路由的原理 匹配不同的url路径进行解析,然后动态的渲染出不同的内容,但是当...

  • 第三十一节:Vue路由:前端路由vs后端路由的了解

    1. 认识前端路由和后端路由 前端路由相对于后端路由而言的, 在理解前端路由之前先对于路由有一个基本的了解 路由:...

  • 前端微服务化解决方案5 - 路由分发

    路由分发式微前端 从应用分发路由到路由分发应用 用这句话来解释,微前端的路由,再合适不过来. 路由分发式微前端,即...

  • vue - 路由模式

    1 路由的基本概念与原理 路由的本质就是对应关系; 在开发中, 路由分为前端路由和后端路由. 1.1 前端路由 概...

  • react-router-dom

    一、什么是前端路由 在我看来,前端路由和网络上的路由器功能很像。前端路由也是进行分发操作,只不过其分发的是页面跳转...

  • vue基础-路由(重要)

    前端路由的概念与原理 什么是前端路由 Hash 地址与组件之间的映射关系,前端路由可以将hash地址和组件关联起来...

  • CreateReactApp+ReactRouter4的使用

    路由基础介绍1,什么是前端路由? 路由是根据不同的 url 地址展示不同的内容或页面 前端路由就是把不同路由对应不...

  • 面试:谈谈对前端路由的理解?

    面试官想听到什么答案呢? 1、为什么会出现前端路由。 2、前端路由解决了什么问题。 3、前端路由实现的原理是什么。...

  • 前端路由(一)

    前端路由之变化url不发送请求 什么是路由?为什么要有前端路由? 首先,域名的组成:http://(协议)www....

  • vue学习笔记——vue-router

    1.什么是前端路由? 前端路由是根据不同的URL地址显示不同的内容或页面。 2.什么时候使用前端路由? 在单页面应...

网友评论

      本文标题:74. 前端路由

      本文链接:https://www.haomeiwen.com/subject/kyhetktx.html