Vue-router 模式 `‘hash‘ | ‘history‘ | ‘abstract‘` 的区别

于 2023-08-10 09:46:38 发布
阅读量171 收藏
点赞数
文章标签： vue.js 哈希算法 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65461467/article/details/132202658
版权

v4 的升级

Vue-router v4 升级之后，mode: 'xxx' 替换为 API 的形式，但功能是一样的

  • mode: 'hash' 替换为 createWebHashHistory()
  • mode: 'history' 替换为 createWebHistory()
  • mode: 'abstract' 替换为 createMemoryHistory()

PS：个人感觉，叫 memory 比叫 abstract 更易理解，前者顾名思义，后者就过于抽象。

hash

// http://127.0.0.1:8881/hash.html?a=100&b=20#/aaa/bbb
location.protocol // 'http:'
location.hostname // '127.0.0.1'
location.host // '127.0.0.1:88
最低0.47元/天 解锁文章
@焦~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 基于abstract 路由模式 实现页面内嵌
j_bleach的博客
12-13 5319
abstract 路由模式 abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。 路由示例 export const routes = [ { path: "/", redirect: "abstra
Vue-router 中hash模式和history模式的区别
丹
10-31 595
咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。 咱们来看看小白的回答。 小白回答：hash模式url带#号，history模式不带#号。 回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。 大牛解答：.
如何替换页面url_如何修改url而不刷新页面
weixin_39552472的博客
12-06 2601
在实际的开发工作中可能会有如下需求：需要更改url，但是又不需要页面重新加载。类似于各大单页应用框架的路由实现。首页，有两种方式可以实现更改url而不刷新页面。hash 散列值location.hash = '#hash' // 更改URL的hash值会在浏览器的历史记录中增加一条新的记录，且不会触发浏览器的刷新。 2. pushState | replaceState 状态管理APIpushSt...
Vue-router 学习之路
Romky的博客
11-20 821
vue-router 的使用（入门篇
VueRouter之构建VueRouter对象以及new Vue涉及的处理
玉案轩窗的博客
07-19 1万+
前言 当程序加载执行完vue-router文件，就执行new VueRouter()动作以及new Vue()动作，本篇文章就是探究这两个过程对于路由具体的处理逻辑。 具体分析 new VueRouter() 在第一篇文章中的实例中，调用new VueRouter()来创建router对象，VueRouter()具体的处理逻辑如下： 从上面的处理逻辑中可以看出，new VueRout...
前端 - history
kelly0721的博客
10-09 1004
一、History的几个基本方法 back()：回退到上一个访问记录; 在历史记录中后退：window.history.back(); forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward(); go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1)...
vue-router路由模式详解(小结)
10-16
Vue Router 提供了三种路由模式：Hash 模式、History 模式和 Abstract 模式。 - **Hash 模式**：在这种模式下，URL 会显示一个 "#!" 开头的哈希值，如 `http://example.com/#/home`。Vue Router 利用浏览器的 `...
vue-router源码之history类的浅析
01-19
对于vue-router来说，有三种路由模式history,hash,abstract, abstract是运行在没有window的环境下的，这三种模式都是继承于history类，history实现了一些共用的方法，对于一开始看vue-router源码来说，可以从这里...
详解Vue-Router源码分析路由实现原理
11-28
4. **路由历史(History)**：Vue-Router提供了三种不同的路由模式：`hash`, `abstract`, 和 `history`。其中，`history`模式利用HTML5的`pushState`和`popstate`事件实现更优雅的URL管理，但需要服务器配置支持。 5....
浅析vue-router原理
10-17
3. **Abstract 模式**：这种模式可以在任何 JavaScript 运行环境中使用，即使不支持 History API 的环境，如 Node.js 服务器端。它不依赖特定的浏览器特性，而是提供了一种通用的路由管理方式。 Vue Router 的工作...
Vue的三种路由模式
热门推荐
yiwai6998的博客
11-05 1万+
路由模式解析 这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页
vue-router实现原理
孤云博客
02-28 867
转自：https://segmentfault.com/a/1190000018584560 随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、加博主微信（guyun297890152）可以进入微信技术交流群、QQ技术交流群(183198395)。 近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录...
Vue的路由实现：hash模式 和 history模式 abstract模式
qq_38935512的博客
08-15 7986
hash模式 和 history模式 众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式特点 1.就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的，所以每次改变hash不会重新请求加载页面 2.hash 改变会触发 hashchange 事件 3.hash变化会被浏览器记录...
国庆摆烂第四天，我总结了vue路由hash模式和history的区别
Salange1的博客
10-04 554
vue中常用的模式有两种，hash模式和history模式，最显著的区别就是看浏览器地址中有没有#,带有#的是hash模式，没有的是history模式。还有一种是abstract模式，主要用于不支持浏览器api的环境中，基本没有遇见过。
【源码拾遗】从vue-router看前端路由的两种实现
huangpb的博客
05-29 528
随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页应用（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。 “更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式： 利用URL中的hash（“#”） 利用History interface在 HTML5中新增的方法 vue-router是Vue.js框架的路由插件，下面我们从它的源码入手
VUE的hash路由模式
qq_35417353的博客
12-09 4983
router-view标签就是确定路由位置的 一般放置在APP.vue文件里 路由位置 vue-router 路由模式分为三种 hash history abstract hash路由就是: 跳转的位置是#加上后面的字符 类似于 可以通过控制台location.hash查看当前hash是多少 ** 路由的使用** 在App中设置 <!-- 用于存放路径的组件--> <router-view></router-view> 然后在router/index.js 中添
vue-router 路由模式有⼏种？
ni15534789894的博客
01-11 787
vue-router 有 3 种路由模式：hash、history、abstract对应的源码如下所示： switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base,
Vue番外篇 -- vue-router浅析原理
weixin_34237596的博客
10-18 764
近期被问到一个问题，在你们项目中使用的是Vue的SPA（单页面）还是Vue的多页面设计？ 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么？ 首先我们需要知道vue-router是什么，它是干什么的？ 这里指的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。 换句话说，vue-router就是W...
vue-router原理上
weixin_43905830的博客
11-13 324
7.1、单页面应用和多页面应用 7.1.1、单页面应用（SPA） 单页面应用就是第一次进入页面时会向服务器请求一个html文件，通过ur的改变实现组件之间的切换，要注意的是url在变化的过程中并没有发送请求去请求新的html文件，既然没有新的html文件为什么页面会更新呢？其实这都是靠s帮我们实现的，当url改变时，js会感知到url的变化，通过这一点，可以用js动态的将页面的内容清除掉，然后将下一个页面的内容挂在到当前页面上，这时候的路由不是由后端来做，而是由前端来实现，判断页面到底该显示哪一个组件后，清
vue-router中的hash和history
最新发布
03-16
vue-router中的hash模式和history模式是两种不同的路由模式。 hash模式会在URL中添加一个#号，例如http://example.com/#/about。这种模式在不支持HTML5 History API的浏览器中可以正常工作。 history模式会把URL...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值