vue-router--认识路由

244 阅读5分钟

什么是路由

路由就是通过互联网把信息从源地址传送给目的地址的活动。

什么是路由器

首先明确路由器的作用是什么?它有两个作用:

  • 路由。决定了信息传输的始端和终端
  • 转发。将输入进来的数据转发到合适的输出端。

路由器的工作过程

  • 每个路由器都对应着一个公网ip。这个公网ip就是我们进行路由的时候作为始端或尾端的地址。
  • 在一个路由器下的设备都会存在一个ip地址,比如说192.168.1.1,这就是一个内网ip。内网ip的作用是用来区别同一个路由器下的设备的。当你的朋友发消息给你的手机,其实实际上一开始是发到了路由器上(通过公网ip进行路由)。那路由器怎么知道到底是发给你的手机还是你的电脑呢?他就是通过内网ip进行区别的。内网ip可以看作是路由器给链接它的设备做的一个标号,路由器有一张映射表,叫路由表。内网ip和电脑Mac地址/手机标识(可以理解成是电脑/手机身份证)的映射关系。它通过这个映射表进行信息的转发操作。转给合适的输出端。
  • ip地址是唯一的。但是内网ip是不唯一的。这个很好理解,因为在一个路由器中的内网ip不同,并不能代表不同路由器中的内网ip不能不同。

网页发展历程

第一阶段,网页后端渲染阶段

后端渲染的概念

早期的网页是由后端把整个网页渲染好,然后发送给浏览器进行展示的。这就是后端渲染。

后端渲染的过程

当你通过浏览器去访问某个url的时候,他会把url发送到服务器,然后服务器通过jsp等技术给你生成一个页面。(html+css+java(java的作用就是动态的把数据展示到页面))。最后服务器给你发送过来整个已经渲染好的页面。

后端路由的概念

每个url对应一个后端生成的页面,这种对应关系就是后端来进行处理的,这就是后端路由。

后端渲染的缺陷

  • 所有工作都是后端人员处理
  • 前端人员如果相对页面进行更改得学习后端语言。
  • 数据和页面混在一起。

第二阶段,前后端分离阶段

由于ajax技术的出现,数据可以通过ajax进行异步请求,从而实现了前后端的分离,前端专注页面的美化和交互,后端专注数据。

前后端分离阶段网页生成过程

这时候存在两个服务器,一个是静态资源服务器,这里面存放的是网页对应的html+css+js.一个项目可能有不同的页面,比如说home页,about页等等。所以服务器中存放了几套的html+css+js.还有一个服务器,它是接口服务器,它链接着数据库。就是我们进行数据请求时访问的服务器。当我们访问url时,他先去的是静态资源服务器,拿到url对应的html+css+js,浏览器解析渲染好他们。解析js的时候可能需要进行数据请求,这时候就会访问接口服务器,获取数据。

第三阶段,前端路由阶段

就是我们现在常说的单页面富应用阶段(SPA)。在前后端分离的基础上增加了一层前端路由的概念。 所谓单页面,就说明网页只存在一个页面。但是一般的项目不可能只有一个网页的。所以它的过程是这样的:它的静态资源服务器可能只有一套html+css+js。每个页面对应的是一个大组件。当我们访问一个页面的时候,他会从服务器把这一套html+css+js请求过来,但是加载这个页面对应的组件(对应的js),当他点击切换另一个页面的时候,他会改变url。但是不会向服务器请求资源,而是销毁上个页面的组件,加载这个页面的组件。这样整个就实现了页面的切换实际上是组件的切换。也就是说url和组件相对应,和js相对应。谁来处理这个对应关系呢?就是我们的前端路由,处理url和组件之间的对应关系

改变url不刷新页面的方式

前端路由有个很重要的地方,就是要求我们改变url,但是不会向服务器请求数据。那么我们怎么实现呢?有两种方式实现。

使用location对象的hash

使用location.hash改变url,从而不会刷新页面.

使用HTML5的history模式

  • history.pushState({},"","")第一个参数是一个对象,第二个参数是一个字符串,我们只需要填第三个参数即可。其他参数为空对象或空字符串。 这个pushState其实是类似执行了一个栈结构的进栈。这个就是个很重要的概念了,因为pushState他会把所有的一切存在堆栈里面,举个例子。 那么他现在栈结构应该是这样的: 那么怎么进行进栈出栈操作呢?可以执行很多指令进行切换
  1. 浏览器上的前进按钮 等价于 history.forward() 等价于 history.go(1)
  2. 浏览器上的后退按钮 等价于 history.forward() 等价于 history.go(-1) 他们都是能改变url而不重新请求数据的,当然history.go()可以是任意数字。
  • history.replaceState({},"","")这个跟pushState截然不同,这个就是直接替换,不会形成栈结构,所以浏览器的前进后退按钮也不能点击。