Vue路由的两种模式

后端路由

1、后端渲染：jsp-java server page

后端编写jsp文件代码，包含html+css+java，java代码的作用是从数据库中读取数据，并且将它动态地放在页面中。当浏览器去请求时，后端会返回已经处理好的完整的页面给前端显示。所以早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好的对应的HTML页面，返回给客户端进行展示。

2、后端路由

后端处理url和页面之间的映射关系

• 一个页面有自己对应的网址，也就是url
• url会发送到服务器，服务器会通过正则对该url进行匹配，并且最后交给一个Controller进行处理
• Controller进行各种处理，最终生成HTML或者数据，返回给前端
• 这就完成了一个IO操作

3、后端路由缺点

• 开发的页面模块需要后端人员来编写和维护
• 如果前端人员(在那时可能是指写页面的人吧，和现在理解的前端人员不同)需要开发页面，则需要通过PHP和java等语言来编写页面代码
• HTML代码和数据以及一些逻辑处理会混在一起，编写和维护都十分困难

前后端分离阶段

后端只负责提供数据，不参与其他任何阶段的内容

在这个阶段中，浏览器中输入一个url，会向静态资源服务器发起请求，静态资源服务器会返回html+css+js，js代码是由浏览器执行的，执行的过程中会发送ajax请求，这个请求是向后端发送api请求获取数据，返回后前端在通过js代码创建div等dom，与数据拼接起来再渲染到页面上

1、前端渲染

浏览器中显示的网页中大部分内容，都是都前端写的js代码在浏览器中执行，最终渲染出来的网页。

2、前端路由阶段

• 随着ajax的出现，有了前后端分离的开发模式
• 后端只提供api来返回数据，前端通过ajax获取数据，并且可以通过js将数据渲染到页面中
• 前后端责任清晰，后端专注在数据上，前端专注在交互和可视化上
• 当移动端出现后(IOS / Android)出现后，后端不需要进行任何处理，依然使用之前的一套api

前端路由阶段-SPA页面

单页面富应用(signal page application)，整个网站只有一个html页面，谁在管理目前的映射关系？

1、前端路由

前端处理url和页面之间的映射关系，一个url对应一个组件

2、单页面富应用

• 在前后端分离的基础上加了一层前端路由
• 前端来维护一套路由规则

3、前端路由的核心

• 改变url，页面不进行整体刷新
• 如何实现呢？请看下面

Vue路由的两种模式

在本地启动的情况下，两种模式除了在路径上hash模式在path之前多了 #/，似乎没有什么差别，打包代码放上服务器，打开一个不存在的路径，hash模式下会重定向到not-found页面，但是history模式会直接返回404，如果找不到的话，这个是需要后端配合处理的。

history 模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。现在history采用HTML5的新特性；且提供了两个新方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 在修改 url 后，虽然页面并不会刷新，但我们在手动刷新，或通过 url 直接进入应用的时候， 服务端是无法识别这个 url 的。因为我们是单页应用，只有一个 html 文件，服务端在处理其他路径的 url 的时候，就会出现404的情况。 所以，如果要应用 history 模式，需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回单页应用的 html 文件。

hash 模式

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 “www.baidu.com/#hashhash” ，其中 “#hashhash” 就是我们期望的 hash 值。

由于 hash 值的变化不会导致浏览器像服务器发送请求重加载页面，对服务端安全无用，但是hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

链接

https://juejin.cn/post/6844903890278694919

https://www.bilibili.com/video/BV15741177Eh?p=105