vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?
1. vue中路由模式的种类有两种
1. 一种是 hash 模式。
2. 一种是 h5 的 history 模式。
2. hash 和 history 都是来自 bom 对象 bom 来自 window
3. window.location.hash
4. hash 是属于 window.location 这个对象,而history直接属于 window
5. window.history
6. 是因为路由模式下,当hash值发生改变,不会发生网络请求,但是href会,vue会自动监听hash 当 hash发生改变的时候,只会去更新对应的组件,不会发送网络请求。
7. history 实现路由的原理 history.pushState() 有历史记录,会发送网络请求,采用的是栈堆。
栈内存最大的优势是:先进后出
8. 研究一个方法:通过三点去学
1. 要明白它是干啥的
2. 要知道它的参数代表是什么
3. 要知道返回值是什么
history 原理图

history.back() 返回上一级 === history.go(-1)
history.forwords() === history.go(-1)
history.replaceState() 没有存储记忆的路由,不能返回
作者:晋飞翔
手机号(微信同步):17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!!!
vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?的更多相关文章
- React SPA 应用 hash 路由如何使用锚点
当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...
- 在vue中获取微信支付code及code被占用问题的解决?
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...
- Vue中常见参数传递方式
文章内容:这里只有vue中父子组件传参.路由间的传参 (另外还有vuex.储存本地.中央bus等方式) 一.父子组件 1.1父传子(props) <!-- 父组件father.vue --> ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- vue中的组件,Component元素,自定义路由,异步数据获取
组件是Vue最强大的功能之一.组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DO ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
随机推荐
- Docker Stack 学习笔记
该文为<深入浅出Docker>的学习笔记,感谢查看,如有错误,欢迎指正 一.简介 Docker Stack 是为了解决大规模场景下的多服务部署和管理,提供了期望状态,滚动升级,简单易用,扩 ...
- IDAE快捷键与设置
以前做项目的时候都是用Eclispe,来到新的公司发现IDE用的是IDEA集成开发工具,以前也用过IDEA,只是略懂略懂,以后你会发现,当你用IDEA的快捷键的时候,会6的飞起 1.IDEA常用快捷键 ...
- python数据类型(第一弹)
作为一门计算机编程语言,python与其它语言一样,设有若干种数据类型,准确掌握各种数据类型的常用方法是精通python的必要条件,也是熟练使用各数据类型.最大限度发挥它们功能的基本条件. pytho ...
- Electron – 项目报错整理(打包~2): electron-packager踩坑
- [大数据技术]Kettle初次连接MySQL数据库 报错问题 错误连接数据库 Error occured while trying to connect to the database Exception while loading class org.gjt.mm.mysql.Driver
报错内容如下: 错误连接数据库 [foodmartconn] : org.pentaho.di.core.exception.KettleDatabaseException: Error occure ...
- 论文-MobileNet-V1、ShuffleNet-V1、MobileNet-V2、ShuffleNet-V2、MobileNet-V3
1.结构对比 1)MobileNet-V1 2)ShuffleNet-V1 3)MobileNet-V2 4)ShuffleNet-V2
- MySQL 8 模式匹配
MySQL 提供了两种模式匹配: 标准 SQL 模式匹配 基于扩展正则的模式匹配 SQL 模式匹配使用 LIKE 命令进行模式匹配操作, _ 匹配任意单个字符.% 匹配任意多个字符,包含 0 个字符 ...
- TChart-图表编辑器的测试
最近不知怎么的,想研究一下图表.先上效果图: 功能代码: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Class ...
- Avro介绍
Avro介绍 Apache Avro是一个数据序列化系统. Avro所提供的属性: 1.丰富的数据结构2.使用快速的压缩二进制数据格式3.提供容器文件用于持久化数据4.远程过程调用RPC5.简单的 ...
- CF718C Sasha and Array [线段树+矩阵]
我们考虑线性代数上面的矩阵知识 啊呸,是基础数学 斐波那契的矩阵就不讲了 定义矩阵 \(f_x\) 是第 \(x\) 项的斐波那契矩阵 因为 \(f_i * f_j = f_{i+j}\) 然后又因为 ...