【前端路由模式 之 Vue Router 中的两种路由模式】----个人理解(通俗)版

记录自己做项目中,对于 Vue Router 中的两种路由模式的个人理解。

文章目录

  • 前言
  • 一、路由的作用
  • [二、 Vue Router 的 路由 模式](#二、 Vue Router 的 路由 模式)
  • [三、路由模式之---- Hash 模式](#三、路由模式之---- Hash 模式)
  • [四、路由模式之---- History 模式](#四、路由模式之---- History 模式)
  • [History 模式和Hash 模式的区别 的总结](#History 模式和Hash 模式的区别 的总结)

前言

⁣⁣⁣⁣  ⁣⁣⁣⁣ 之前我在写前端Vue项目的时候,在创建其项目的时候,他会让你选择你项目使用的路由模式,于是乎我就想去写一个博客总结一下。

⁣⁣⁣⁣  ⁣⁣⁣⁣ 本文介绍的 History 模式Hash 模式 ,这两种路由模式,是以Vue为例子去讲解的,在React Router 和 Angular Router 都有类似于 Vue Router 中的 Hash 模式 和 History 模式,虽然名称和实现方式可能略有不同,但基本概念是一致的。


⁣⁣⁣⁣  ⁣⁣⁣⁣ 提示:以下是本篇文章正文内容,仅代表博主个人理解,可供参考。

一、路由的作用

⁣⁣⁣⁣  ⁣⁣⁣⁣ 路由他是提供了浏览器地址变化,网页内容也跟随变化 ,实现动态切换的一种效果,他们两个结合起来,就提供了体验良好的单页面Web应用,再去配合AJAX异步请求,可以使我们的页面内容更加丰富多彩。

⁣⁣⁣⁣ 我们可以在我们的浏览器的左上角,看到这个标志,分别是【后退】、【前进】、【刷新页面】

⁣⁣⁣⁣ 而我们的路由需要实现三个功能

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣ 1、 当浏览器地址变化时,切换页面;

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣ 2、点击浏览器【后退】、【前进】按钮,网页内容跟随变化;

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣ 3、点击【刷新页面】时,网页加载当前路由对应内容;

二、 Vue Router 的 路由 模式

⁣⁣⁣⁣  ⁣⁣⁣⁣ 在使用 Vue CLI 创建项目时,出现的提示是 "Use history mode for router ?",这一步是让你选择是否启用 Vue Router 的 history 模式。如果你想使用 Hash 模式 路由,你应该输入 N(No),表示不使用 History 模式,默认使用 Hash 模式。这是与路由管理相关的一个配置,影响到前端
路由的工作方式

⁣⁣⁣⁣  ⁣⁣⁣⁣ Vue Router 是 Vue.js 的官方路由库,负责处理单页面应用(SPA)中的页面导航。Vue Router 提供2种主要的路由模式:

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣ • Hash 模式 (默认模式)

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣⁣⁣⁣ • History 模式

⁣⁣⁣⁣  ⁣⁣⁣⁣ 下面去详细的介绍一下!!!

三、路由模式之---- Hash 模式

Hash 模式:

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣ • URL 结构:在 Hash 模式下,URL 中会包含 # 符号(这个是他标志)。例如:http://example.com/#/about。也可以如下图。

⁣⁣⁣⁣  ⁣⁣⁣⁣ • 工作原理:在 Hash 模式下,# 号后面的部分是用来标识客户端路由的。这部分不会被发送到服务器,所以服务器不会对它做出响应,到时候由前端路由控制其关系(我们可以在路由关系表中,去灵活的控制)

⁣⁣⁣⁣  ⁣⁣⁣⁣ • 优点:不需要额外的服务器配置,因为 Hash(# 符号后面的) 部分不会被发送到服务器,到时候会被前端路由拦截,去做匹配关系。

⁣⁣⁣⁣  ⁣⁣⁣⁣ Hash 模式他的路由使用#分开,当#后面的路由发生变化的时候,不需要去向服务器发送信息,到时候就可以去前端路由的对照表里面去寻找,当他需要向后端发送请求的时候可以采用点击事件、声明周期函数等等这样单独的向后端发送请求,这样就可以完美的实现,url变化的时候,前端和后端分离开来,而不是url一发生变化,就请求后端,这样前端也可以去维护自己的前端路由,而Hash 模式就比History 模式 多了一个#而已,其他的都是一样的。

⁣⁣⁣⁣  ⁣⁣⁣⁣ # 后面的内容不会被发送到服务器,前端会根据 # 后面的部分找到对应的路由,前后端是解耦的 。如果用户手动刷新页面或直接访问 URL,请求不会发送到服务器,因为 # 后面的部分(即 hash 部分)不会被发送到服务器,服务器只会处理 # 之前的路径。具体来说,浏览器只会向服务器发送 http://example.com/ 的请求,而不会包含 http://example.com/#/about 中 #/about 这一部分。然后,前端的 JavaScript 会读取 # 后面的路由,进行页面渲染。因此,在 Hash 模式下,不需要服务器特殊配置来处理前端路由,刷新页面或直接访问也不会导致 404 错误。

四、路由模式之---- History 模式

History 模式

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣ • URL的 结构:在 History 模式下,URL 不会有 # 符号 (这个可能是我们见得比较多的情况) 。例如:http://example.com/about。

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣ • 工作原理:使用 HTML5 提供的 History API(pushState 和 replaceState)来操作浏览器的历史记录,直接改变 URL 。它允许前端路由系统模拟传统的 URL 路径,使 URL 看起来像正常的页面地址。URL 变化时,在前端路由下,由前端路由进行拦截并处理,前端控制页面的切换,而不是每次 URL 变化都向服务器发送请求

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣但是他有一个缺点 :需要在服务器后端需要进行额外的服务器配置,以确保所有路由都返回到 index.html,否则在刷新页面时,服务器会尝试查找实际的物理文件并返回 404 错误。当用户手动刷新或直接访问某个 URL 时,History 模式需要向服务器发送请求(我们后端服务器需要配置,不配置就会报404找不到资源),Hash 模式则不需要。

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣History 模式中,URL 发生变化时不会自动向后端请求,只要是通过前端路由控制的页面跳转,URL 变化只会被前端拦截并进行处理,不会向服务器发送请求 。但是,如果用户手动刷新页面或直接访问 URL,那么请求会发送到服务器,如果没有配置服务器的重定向策略,会导致 404 错误。所以需要后端服务器配置,让所有路由都指向同一个 index.html,然后由前端根据路径处理路由逻辑。

⁣⁣⁣⁣  ⁣⁣⁣⁣  ⁣so:可以利用nginx,配置一下,防止用户输入一个不存在的,导致返回404报错误!!!在nginx.conf配置中,配置一下,确保用户可能随机输入一个url,不存在的时候,不会导致返回404,全部重定向到index.html中。

⁣⁣⁣⁣  ⁣⁣⁣⁣ ⚠️⚠️⚠️url变化的也是通过前端路由去控制的,前端路由怎么定义就按照其关系来,不会向后端发送请求,只有用户手动刷新页面或直接访问 URL ,那么请求会发送到服务器。 这一段话非常的对于理解,非常的重要!!

History 模式和Hash 模式的区别 的总结

⁣⁣⁣⁣  ⁣⁣⁣⁣ History 模式和 Hash 模式的区别主要在于 URL 的表现形式:

如下:

⁣⁣⁣⁣  ⁣⁣⁣⁣ 1、Hash 模式通过 # 分隔符处理路由,# 后面的部分不会发送到服务器,页面切换是前端路由控制的 。History 模式通过 HTML5 的 History API 控制,虽然 URL 不包含 #,也是通过前端路由来控制页面跳转,只有用户手动刷新页面或直接访问 URL ,那么请求会发送到服务器。

⁣⁣⁣⁣  ⁣⁣⁣⁣ 2、前端路由控制 URL :在前端路由(无论是 Hash 还是 History 模式)下,URL 变化时,由前端路由进行拦截并处理,前端控制页面的切换,而不是每次 URL 变化都向服务器发送请求。

⁣⁣⁣⁣  ⁣⁣⁣⁣ 手动刷新或直接访问时的差别 :当用户手动刷新或直接访问某个 URL 时,History 模式需要向服务器发送请求(我们后端服务器需要配置,不配置就会报404找不到资源),Hash 模式则不需要

⁣⁣⁣⁣  ⁣⁣⁣⁣ 以上内容摘选于个人笔记部分!!!

相关推荐
低保和光头哪个先来2 分钟前
牛客算法简单题(JS版)
javascript·算法
要加油哦~5 分钟前
字节青训营 | 数字分组求偶数和
开发语言·javascript·ecmascript
safe0307 分钟前
SPA和SSR
开发语言·前端·javascript·汇编·vue.js·react.js·前端框架
二川bro11 分钟前
“前端兼容——CSS篇”(进阶版)
前端·css
GISer_Jing1 小时前
CSS常见适配布局方式
前端·css·html
卡布达ovo2 小时前
Django+Vue全栈开发项目入门(四)
vue.js·django
csdn_金手指3 小时前
mac电脑通过 npm 安装 @vue/cli脚手架超时问题;
vue.js·macos·npm
LvManBa3 小时前
Vue学习记录之二十二 Vue3+vite+electron 构建项目实例
vue.js·学习·electron
llrraa20104 小时前
Chrome异步编程
前端·chrome
王哲晓5 小时前
第九章 Vue之watch监听器
css·vue.js·css3