程序员经验分享-hwhale

浅析Vue前端路由中 hash 与 history的区别

2023-05-16

Vue前端路由hash与history间有什么区别？下面本篇文章就来了解一下前端路由 hash 与 history 的差异，希望对大家有所帮助！

没了解这两种路由前，不管是 vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由，看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出，大家一起沟通。

简单介绍 Vue Router

  • Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。（学习视频分享：vue视频教程）
  • 至于我们为什么不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的 index.html 页面，所以你写的 标签是不起作用的，你必须使用 vue-router 来进行管理。

Vue Router 实现原理

  • 在了解路由模式前，我们要先清楚，vue-roter 的实现原理是怎样的，什么是单页面应用，特点是什么，这样更容易加深对路由的理解。

  • SPA 单页面及应用方式:单一页面应用程序，只有一个完整的页面；它在第一次加载页面时,就将唯一完整的 html 页面和所有其余页面组件一起下载下来，这样它在切换页面时，不会加载整个页面，而是只更新某个指定的容器中内容。

  • 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

  • 路由器对象底层实现的三大步骤即(1)监视地址栏变化；(2)查找当前路径对应的页面组件；(3)将找到的页面组件替换到 router-vieW 的位置。

  • vue-router 在实现单页面前端路由时，提供了两种方式：Hash 模式和 History 模式；vue2 是根据 mode 参数来决定采用哪一种方式，vue3 则是 history 参数，下面我们将围绕这个属性进行进一步了解。

Hash

简述

  • vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。  hash（#）是 URL 的锚点，代表的是网页中的一个位置，单单改变 # 后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 # 是用来指导浏览器动作的，对服务器端完全无用，HTTP 请求中也不会不包括 # ，同时每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用 "后退" 按钮，就可以回到上一个位置，所以说 hash 模式通过锚点值的改变，根据不同的值，渲染指定 DOM 位置的不同数据。

  • # 符号本身以及它后面的字符称之为 hash，可通过 window.location.hash 属性读取。

特点

  • hash 虽然出现在URL中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面
  • 可以为 hash 的改变添加监听事件：
  • window.addEventListener("hashchange", fncEvent, false)
  • 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
  • url 带一个 # 号。

设置

  • vue3 设置 hash 模式路由

history

简述

  • history 是路由的另一种模式，由于 hash 模式会在 url 中带#，如果不想要带 #的话，我们可以使用路由的 history 模式，只需要在响应的 router 配置规则时,加上即可，vue 的路由默认是 hash 模式。
  • 利用了HTML5 History Interface中新增的 pushState() 和 replaceState() 方法。
  • 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

设置

特点

  • 路由跳转不需要重新加载页面。
  • 不带 # 在大部分人看来要比 hash 路由好看许多。
  • 兼容性没有 hash 好，会在下面展开说明

生产环境问题及解决

  • 当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到  www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。

  • 生产环境 刷新 404 的解决办法可以在 nginx 做代理转发，在 nginx 中配置按顺序检查参数中的资源是否存在，如果都没有找到，让 nginx 内部重定向到项目首页。

开发环境- historyApiFallback

  • 有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢，不是和生产同样的刷新操作嘛。

  • 这里我也是疑问了一下，经查阅相关资料后发现在 vue-cli 中 webpack 帮我们做了处理

  • 如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求，如果后端没有对应的接口,就会出现下面这个报错提示。

总结

  • 至此我们使用知道了 vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容梗好，但是带#显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。有疑问的同学欢迎在评论区进行沟通。

（学习视频分享：web前端开发、编程基础视频）

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

浅析Vue前端路由中 hash 与 history的区别 的相关文章

  • JavaScript中的内存管理

    相关推荐 xff1a javascript视频教程 大多数时候 xff0c 我们在不了解有关内存管理的知识下也只开发 xff0c 因为 JS 引擎会为我们处理这个问题 不过 xff0c 有时候我们会遇到内存泄漏之类的问题 xff0c 这个只

  • 详解bootstrap自定义侧边导航栏的方法

    本篇文章给大家介绍一下bootstrap自定义侧边导航栏的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 bootstrap自带的响应式导航栏是向下滑动的 xff0c 有时满足不了个性化的需求

  • 使用VSCode调试Golang工程

    本篇文章给大家介绍一下使用VSCode调试Golang工程的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 推荐学习 xff1a vscode教程 关键字 最简单的调试攻略多项目调试 适用个人开

  • 深入解析JavaScript中的作用域

    本篇文章带大家深入理解JavaScript作用域 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 这篇文章称为笔记更为合适一些 xff0c 内容来源于 你不知道的JavaScript xff08 上卷

  • 12个提升程序员软技能与效率的开发工具（转载）

    本篇文章给大家推荐12个提升程序员软技能与效率的开发工具 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 大家好 xff0c 我是你们的 猫哥 xff0c 那个不喜欢吃鱼 又不喜欢喵 的超级猫 这一期

  • 一文了解Nodejs中的模块化和事件循环

    本篇文章带大家了解一下Nodejs中的模块化和事件循环 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 5 20出了一款线上Ide xff0c 能够在浏览器上边运行 Node js WebContai

  • 浅谈php输出数组的4种方法

    在之前的文章 PHP数组学习之一维数组如何创建和初始化 xff08 代码详解 xff09 和 PHP数组学习之二维数组创建方法浅析 中我们通过代码实例介绍了一维数组和二维数组的定义方法 xff0c 简单易懂 既然数组创建并初始化了 xff0

  • 浅谈PHP遍历数组之for循环语句

    数组是一个非常基础和重要的数据结构 xff0c 当我们创建好一个数组后 xff0c 就需要去操作它 xff1b 而数组最常见的一个操作就是循环遍历 PHP中支持多种遍历数组的方法 xff0c 今天我们就来学习如何利用for循环语句来遍历数组

  • 软件测试 | 测试开发 | Python中日志异步发送到远程服务器

    背景 在Python中使用日志最常用的方式就是在控制台和文件中输出日志了 logging模块也很好的提供的相应 的类 使用起来也非常方便 但是有时我们可能会有一些需求 如还需要将日志发送到远端 或者直接写入数 据库 这种需求该如何实现呢 S

  • 笔记本外接显示器闪烁问题

    笔记本外接显示器闪烁问题 最简单的一个解决方法 xff1a 就是不要把显示器和笔记本的电源插到同一个排插上

  • 8种CSS实现loading加载特效的小技巧（分享）

    本篇文章给大家分享8种CSS实现loading加载特效的小技巧 xff0c 希望对大家有所帮助 xff01 为什么会写这种文章呢 xff1f 平时开发的时候 xff0c 我们遇到加载 xff0c 要么是UI框架中自带 xff0c 要么就是百

  • 值得收藏的26个css面试题，增强你的CSS基础！

    CSS在网页设计中非常流行 xff0c 可以减少结构内容中的复杂性和重复 本篇文章给大家分享26个基于css的面试题 xff0c 可以增强你的CSS基础 xff0c 快来学习吧 xff08 学习视频分享 xff1a css视频教程 xff0

  • JavaScript中关于“this”的7个有趣面试题，你能全答对吗？

    相关推荐 xff1a 2021年大前端面试题汇总 xff08 收藏 xff09 在 JavaScript 中 xff0c this 是函数调用上下文 正是由于 this 的行为很复杂 xff0c 所以在 JavaScript 面试中 xff

  • 分享几种实用的Node.js调试方法，快来收藏吧！！

    本篇文章给大家介绍Nodejs调试的几种方式 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 相关推荐 xff1a nodejs 教程 第一种 1 打开 vscode 内置终端 xff0c 右上角选择

  • 聊聊在VSCode中怎么点击DOM 自动定位到相应代码行？

    如何在 Vue 项目中 xff0c 通过点击 DOM 自动定位VSCode中的代码行 xff1f 下面本篇文章就来给大家分享一个插件 xff0c 并聊聊实现原理 xff0c 快来收藏吧 xff01 现在大型的 Vue项目基本上都是多人协作开

  • 一文深入了解 Node 中的事件循环

    Node js是单线程的语言 xff0c 是通过事件循环处理非阻塞I O操作的 下面本篇文章带大家详细了解 Node 中的事件循环 xff0c 希望对大家有所帮助 xff01 Node js 做为 JavaScript 的服务端运行时 xf

  • 深入解析vue中的key，看看key到底能拿来干嘛！

    key到底有什么用途 xff1f 下面本篇文章给大家深度解析一下vue中的key xff0c 看看key到底能拿来干嘛 xff0c 希望对大家有所帮助 xff01 vue中关于key的深度解析 key到底有什么用途 先来看官方解释 key属

  • 一文聊聊Node.js中的模块路径解析

    本篇文章带大家了解一下Node js中的模块路径解析 xff0c 介绍一下Node模块路径解析方法 xff0c 希望对大家有所帮助 xff01 require案例 当前有一个项目当前项目路径 Users rainbow Documents

  • 聊聊node中怎么借助第三方开源库实现网站爬取功能

    本篇文章给大家介绍一下node中借助第三方开源库轻松实现网站爬取功能的方法 xff0c 希望对大家有所帮助 xff01 nodejs实现网站爬取功能 第三方库介绍 request 对网络请求的封装 cheerio node 版本的 jQue

  • Angular中非父子组件间怎么通讯

    Angular中非父子组件间怎么通讯 xff1f 本篇文章给大家介绍一下Angular非父子组件之间通过服务通讯的方法 xff0c 希望对大家有所帮助 xff01 其实提到父子组件之间传值 xff0c 对我们来说 xff0c 再熟悉不过了

随机推荐

  • 软件测试 | 测试开发 | Django+Celery框架自动化定时任务开发

    本章介绍使用DjCelery即Django 43 Celery框架开发定时任务功能 xff0c 在Autotestplat平台上实现单一接口自动化测试脚本 业务场景接口自动化测试脚本 App自动化测试脚本 Web自动化测试脚本等任务的定时执

  • 认识一下vue中的$attrs和$listeners属性，聊聊用法

    本篇文章带大家了解一下vue中封装组件利器 xff1a attrs listeners属性 xff0c 看看它们的用法 xff0c 希望对大家有所帮助 xff01 多级组件嵌套需要传递数据时 xff0c 通常使用的方法是通过vuex 但仅仅

  • 深入了解node.js中的module-alias（分享一些避坑方法）

    本篇文章带大家了解一下node js中的module alias xff0c 介绍一下module alias原理 module alias的一个常见问题 xff08 坑 xff09 xff0c 希望对大家有所帮助 xff01 首先有必要介

  • 聊聊Nodejs中的核心模块：stream流模块（看看如何使用）

    本篇文章带大家详细理解一下Nodejs中的stream流模块 xff0c 介绍一下stream流概念及用法 xff0c 希望对大家有所帮助 xff01 stream流模块 xff0c 是Node中非常核心的一个模块 xff0c 其它模块如f

  • 深入解析下vue3中的渲染系统

    本篇文章给大家深入解析一下vue3中的渲染系统 xff0c 希望对大家有所帮助 xff01 提到马拉松 xff0c 大家都知道马拉松是世界上最长的田径项目 xff08 全程42 195公里 xff09 xff0c 是所有体育运动中体力消耗最

  • 一文聊聊Node.js中的EventEmitter模块

    EventEmitter是 Node js 的内置模块 xff0c 为我们提供了事件订阅机制 下面本篇文章就来带大家了解一下Node js中的EventEmitter模块 xff0c 介绍一下它的用法 xff0c 希望对大家有所帮助 xff

  • 一起聊聊angular的样式隔离实现机制

    Angular是怎么进行样式隔离的 xff1f 下面本篇文章就来和大家一起聊聊angular的样式隔离实现机制 xff0c 希望对大家有所帮助 xff01 angular 以组件为基本单位 我们编写一个一个的组件 xff0c 再将这些组件组

  • 聊聊Node.js中如何实现Stream流（可读、可写、双工和转换流）

    本篇文章带大家了解一下Node中的之Stream xff0c 介绍一下引入 Stream xff0c 实现可读流 可写流 双工流和转换流的方法 xff0c 希望对大家有所帮助 xff01 引入 Stream 假设我们有这么一个需求 xff0

  • 带你详解vue中实现全页面或局部刷新的方法

    vue中怎么实现页面刷新 xff1f 下面本篇文章给大家介绍一下在vue中实现全页面刷新和局部刷新的方法 xff0c 希望对大家有所帮助 xff01 一 全页面刷新 1 修改 App vue xff0c 代码如下 xff1a lt temp

  • 深入浅析Angular指令如何保持关注点的分离？

    Angular指令如何保持关注点的分离 xff1f 本篇文章带大家了解一下通过 Angular 指令保持关注点分离的方法 xff0c 希望对大家有所帮助 xff01 假设在我们的应用程序中有一个日期选择器组件 用户每次更改日期的时 xff0

  • VSCode开发Python，这 14 个插件不可错过！

    VSCode怎么开发Python xff1f 下面本篇文章给大家整理分享VSCode中开发Python的14 个不可错过插件 xff0c 快来收藏 xff0c 看看有没有需要 xff01 可以说 xff0c Visual Studio Co

  • 软件测试 | 测试开发 | 使用charles 修改服务器返回数据

    使用charles 修改服务器返回数据 相信大家在做测试时 xff0c 一定有现有的返回结果不能覆盖到自己需要测试的全部场景的情况 xff0c 为了方便我们测试一些特殊情况 xff0c 我们就需要让服务器返回一些指定的内容以实现我们的测试c

  • 聊聊Vue3 style中新增了哪些特性（汇总）

    Vue3对style样式进行了升级 xff0c 下面本篇文章给大家汇总分享一下Vue3 style的新特性 xff0c 希望对大家有所帮助 xff01 Vue3 0后推出的setup函数 xff0c 像写JS一样开发Vue组件 xff0c

  • 原来利用纯CSS也能实现文字轮播与图片轮播！

    怎么制作文字轮播与图片轮播 xff1f 大家第一想到的是不是利用js xff0c 其实利用纯CSS也能实现文字轮播与图片轮播 xff0c 下面来看看实现方法 xff0c 希望对大家有所帮助 xff01 今天 xff0c 分享一个实际业务中能

  • 详解Node.js中Buffer对象的操作（创建、读写）

    本篇文章带大家了解一下Node中的Buffer对象 xff0c 介绍一下创建 Buffer 对象 读 Buffer 对象 写 Buffer 对象的方法 xff0c 希望对大家有所帮助 xff01 Buffer 是 Node js 的内置类型

  • Node.js学习之聊聊Events模块

    本篇文章带大家了解一下Node js中的Events模块 xff0c 介绍一下 Events 中的发布订阅模式 xff0c 希望对大家有所帮助 xff01 Events模块 参考官网 xff1a events 事件触发器 Node js h

  • 手把手教你安装和配置pm2，实现自动化部署node项目

    pm2怎么自动化部署nodejs项目 xff1f 下面本篇文章给大家介绍一下安装和配置pm2 xff0c 并实现自动化部署node项目的方法 xff0c 希望对大家有所帮助 xff01 1 pm2简介 pm2 xff08 process m

  • buffer是什么？深入了解Nodejs中的buffer模块

    buffer是什么 xff1f 下面本篇文章带大家深入了解一下Nodejs中的buffer模块 xff0c 介绍一下创建 复制 拼接 截取 填充Buffer xff0c 以及Buffer与String相互转换的方法 xff0c 希望对大家有

  • Angular进阶学习之深入了解路由和表单

    本篇文章是Angular的进阶学习 xff0c 我们一起来详细了解一下Angular中的路由和表单 xff0c 希望对大家有所帮助 xff01 Angular的路由介绍 在单页面应用中 xff0c 需要在定义好的不同视图中 xff08 组件

  • 浅析Vue前端路由中 hash 与 history的区别

    Vue前端路由hash与history间有什么区别 xff1f 下面本篇文章就来了解一下前端路由 hash 与 history 的差异 xff0c 希望对大家有所帮助 xff01 没了解这两种路由前 xff0c 不管是 vue还是 reac

热门标签