路由最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：

1、后端路由阶段；

2、前后端分离阶段；

3、单页面富应用（SPA）

一、后端路由:

后端路由的特点：

前端每次跳转到不同url地址,都会重新访问服务器,
服务器根据前端的路由,返回不同的数据,或者是HTML页面

早期的网站开发整个HTML页面是由服务器来渲染的。

服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。

优点：

1、这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。

2、首屏加载时间快，因为浏览器获取的就是一个完整的页面，因此获取后浏览器直接可以渲染视图

**因为SEO在获取页面内容的时候后端路由是一个完整的页面内容,可以更好的分析页面内容，**后端路由直接展示在页面上的就是数据，因此利用爬虫可以方便的爬取页面上包含的信息。

搜索引擎的基础爬虫原理就是抓取你的url，然后获取你的html源代码并解析。前端路由通常用了数据绑定机制来展示页面数据，爬虫获取到的html是你的模型页面而不是最终数据的渲染页面，爬虫爬到的不是直接的数据，所以说用js来渲染数据对seo并不友好。

缺点：

HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情

二、前后端分离阶段:

后端提供数据接口：

后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中；

三、SPA(single page application)开发:（前端路由）

前端路由的话路由的映射通常是进行一些dom的显示和隐藏操作

**前端路由在访问一个新页面的时候仅仅是更换了一下路径,没有网络延迟对于用户体验来说会有相当大的提升
**

前端渲染说明:

前端渲染是指浏览器将页面模板和数据进行组合形成最终的HTML页面
原理就是浏览器通过url获取服务器页面模板,服务器直接将页面模板发送给前端
浏览器拿到页面以后,在解析页面时,通过页面中的ajax向后端请求数据
服务器根据前端对于数据的请求,返回给前端数据
浏览器拿到数据以后在和页面模板整合,形成最终的页面.

多个页面：home.vue / about.vue / category.vue

根据不同路径切换不同组件，和后端无关

前端映射关系：路径《-》组件

从 www.baidu.com/home 切换到 www.baidu.com/about 不希望从服务器再次请求静态资源，不希望所有东西重新加载一遍，而实希望前端组件切换：

解决方案：

1、在路径后面跟上hash值（#）；

2、HTML5的history模式。

静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。

动态资源：需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据。

URL的hash(#)(location.hash)

hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题

前端路由是如何做到URL和内容进行映射呢？监听URL的改变：hashchange

window.addEventListener('hashchange', () => {})

URL的hash也就是锚点(#), 本质上是改变window.location的href属性；

我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；

HTML5的History(location.pathname)

history模式：美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api

由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404

新增了history对象：

history接口是HTML5新增的, 它有六种模式改变URL而不刷新页面：

1、replaceState：替换原来的路径；

2、pushState：使用新的路径；

3、popState：路径的回退；

4、go：向前或向后改变路径；

5、forward：向前改变路径； go(1)

6、back：向后改变路径。go(-1)

window.location对象

history模式下打包后的代码刷新后会报 404 报错

将history模式下打包的代码放置服务器运行，出错: 浏览器一刷新就会出现页面丢失的问题

原因：

第一次发请求，浏览器默认会在url后面加个 ’ / ',访问到服务器的index.html文件，随后返index.html文件给浏览器，浏览器拿到数据后开始渲染，渲染发现index.html文件里有外链的js和css ，发起第二次请求拿到某个js文件，拿到js文件后发现发现js文件里有个逻辑，没有登录就调到login