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 ...
随机推荐
- Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第三章 客户端存储及验证
准备工作: 安装Nuget包:Blazored.LocalStorge. 这是一个client-side 浏览器存储库,找了非常久. 官方文档中也有一款Microsoft.AspNetCore.Pro ...
- 浅谈 vue-loader---合格前端
什么是 vue-loader? vue-loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件的格式撰写 Vue 组件. 如何使用? 1. 安装 npm install ...
- 两种从 TensorFlow 的 checkpoint生成 frozenpb 的方法
1. 从 ckpt-.data,ckpt-.index 和 .meta 生成 frozenpb import os import tensorflow as tf from tensorflow.py ...
- 基于Docker的Consul集群实现服务发现
服务发现 其实简单说,服务发现就是解耦服务与IP地址之间的硬绑定关系,以典型的集群为例,对于集群来说,是有多个节点的,这些节点对应多个IP(或者同一个IP的不同端口号),集群中不同节点责任是不一样的. ...
- 安装ubuntu到移动硬盘(UEFI+GPT),实现在别的电脑也可以使用(详细教程)
前置说明:博主小白,第一次安装ubuntu,参考了网上很多人的教程,发博记录一下自己的安装过程.由于有些地方博主理解较浅或者因为机器硬件等各方面原因,本教程适用有限,仅供参考. 1.准备工作 win系 ...
- honeywell1900扫描枪的使用说明
霍尼韦尔1900扫描枪驱动是honeywell1900扫描枪的USB驱动,就是扫描枪usb转com,如果你的系统是32位的,就直接运行Install_x86.bat,如果是64位的,就运行Instal ...
- MyBatis的延迟加载和缓存机制
延迟加载: 什么是延迟加载: MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis根据对 ...
- Python分布式进程报错:pickle模块不能序列化lambda函数
今天在学习到廖老师Python教程的分布式进程时,遇到了一个错误:_pickle.PicklingError: Can't pickle <function <lambda> at ...
- 剑指offer-面试题22-链表中倒数第k个节点-双指针
/* 题目: 链表中倒数第k个节点 */ /* 思路: 考虑边界条件:链表为空,k值超过链表长度. 双指针: q指针指向第k个节点,p指针指向第1个节点. q指针指向最后一个节点,p指针指向倒数第k个 ...
- .net 基础汇总(1)
1 转载 String.IsNullOrWhiteSpace和String.IsNullOrEmpty的区别