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

你可能感兴趣的:(笔记,java,vue.js,javascript,前端)