【Vue】vue-router中的history和hash

最新推荐文章于 2025-03-28 20:37:39 发布
原创 最新推荐文章于 2025-03-28 20:37:39 发布 · 237 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文深入解析Vue-router的两种URL模式：hash与history。hash模式下，URL带#号，刷新不请求服务器；history模式则利用HTML5 History API，URL更美观但需服务器配置避免404错误。

vue-router提供了两个url模式，一种是hash，另一种是HTML5新增的history，在vue-router中可以通过mode: "history"或者mode: "hash"设置，默认为hash模式。

1.history

  • 请求的url中不会有#
  • 利用了HTML5 History Interface新增的pushState() 和 replaceState() 方法
  • 前端url需要与后端url一致，否则将返回404
  • 刷新也会请求服务器

2.hash

  • 请求的url中带有#
  • 刷新等操作不会请求服务器

总结：如果我们需要美观，我们应该使用history，不过这需要后台服务器的配合

Vue-router 中hash模式和history模式的区别
丹
10-31 699
咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。 咱们来看看小白的回答。 小白回答：hash模式url带#号，history模式不带#号。 回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。 大牛解答：.
vue-router：hash与history
赵玉玲的博客
12-17 1074
结论 实现原理： hash利用hash改变时的onhashchange事件 history利用window.history在H5中新增的特性：onpopstate事件以及pushState()、replaceState()方法 由实现原理引发的特性 url： hsah方式实现的前端路由中有#字符，history实现的就是一个正常的url 页面刷新时的额外配置： 页面刷新时，由于http请求不包含h...
【Vue】Vue-router中的history模式和hash模式
公众号：前端充电宝
08-18 477
为了构建SPA（单页面应用），Vue引入了前端路由Vue-Router，前端路由的核心就是在改变视图的同时不会向后端发起请求。Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。
Vue Router 路由hash和history模式
猫老板的豆
05-08 1982
在 Vue 中，路由的两种主要模式是和，默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。
vue-router中hash和history的区别
qq_42852004的博客
05-09 999
一.vue的基本原理论述 特点 1特点2特点3模式1模式2vue-router基于SPA--single page application单一页面应用程序开发只有一个单一的页面加载页面的时候,不会完整的加载整个页面,而只是更新某一个指定的容器更新视图而不是重新发送请求提供了两种模式Hash模式History模式通过设置mode参数来实现哪一种方式 未完待续 ...
vue-router中Hash模式和History模式
weixin_43872282的博客
03-02 1265
由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，所以人们在html5的history出现前，基本都是使用hash来实现前端路由的。1、hash模式s下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。
vue-router中的hash和history两种模式的区别
10-18
Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
vue-router启用history模式下的开发及非根目录部署方法
10-17
当使用Vue-Router时，可以选择不同的路由模式，其中最常用的两种模式是hash模式和history模式。本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多...
区分vue-router的hash和history模式
01-21
　为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。 　前端路由的核心，就在于：改变视图的同时不会向后端发出请求。 　为了达到这种目的，浏览器当前提供了以下两种支持： 　1...
vue-router 的 Hash 模式 和 History 模式
weixin_42946131的博客
02-28 481
根据项目需求选择合适的路由模式。如果对兼容性和服务器配置有要求，可以选择 Hash 模式；如果对 URL 美观性和 SEO 有要求，可以选择 History 模式。这两种模式的主要区别在于 URL 的表现形式、实现原理以及服务器配置要求。
vue-router的两种路由模式hash和history，区别以及它们的底层实现原理
wanghe1111_的博客
03-13 5448
vue的两种路由模式hash和history模式以及它们的底层实现原理
Vue-router的实现原理、hash和history两种模式的区别、history模式部署后刷新报404
muzidigbig的博客
12-12 8748
项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。 当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。 前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需
Vue-router中的Hash模式与History模式
LALALABALA的博客
05-12 2040
如果需要更友好的URL和更好的SEO支持，可以考虑使用Vue Router的另一种模式，即History模式。在Hash模式下，Vue Router会监听URL中哈希部分的变化，并根据哈希值来匹配对应的路由，从而展示相应的组件内容。在History模式下，Vue Router使用浏览器提供的History API，通过修改浏览器的历史记录来实现前端路由的导航，而无需发送请求到服务器。在Vue Router中，Hash模式是一种URL的哈希模式，也被称为锚点模式。
VueRouter — vue路由hash模式和history模式
热门推荐
小绵杨
03-23 1万+
目录一、前言二、hash模式三、history模式 一、前言 对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。 vue脚手架搭建的项目的路由默认是hash模式。 hash模式： 创建路由实例时，添加mode:"history"属性，即可使用history模式。 const router = new VueRouter({ routes, mode: "history" }) history模式： 二、hash模式 最开始学习超链接a时，就可以利用锚点”#”实现跳转
vueRouter的hash模式跟history的区别
最新发布
2202_75961842的博客
03-28 1307
特性 | Hash 模式 | History 模式 || URL 显示 | 带 `#`，例如 `http://example.com/#/home` | 无 `#`，例如 `http://example.com/home` |
Vue router的两种工作模式--history和hash
qq_36582776的博客
11-19 1298
2、hash模式 vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作 对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事: HashHistory.push()将新的路由添加到浏览器访问...
掌握Vue-router：vue-router-demo深度分析
Vue-router 支持两种路由模式：`history` 和 `hash`。其中： - `history` 模式下，URL 看起来更美观，但需要后端配置支持，否则可能会出现 404 错误。 - `hash` 模式则利用 URL 的 hash 来模拟一个完整的 URL，当 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值