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 ...
随机推荐
- Mac下appium-doctor提示错误汇总
一. 提示 [Error: Could not detect Mac OS X Version from sw_vers output: '10.12'] 解决方法: 1.终端执 ...
- Go Web爬虫并发实现
题目:Exercise: Web Crawler 直接参考了 https://github.com/golang/tour/blob/master/solutions/webcrawler.go 的实 ...
- Typora自动编号设置
找到C:\Users\用户名\AppData\Roaming\Typora\themes\路径下的base.user.css,用文本编辑器打开(若不存在,则自己创建一个),将一下内容复制进去,然后重启 ...
- 消息总线:Spring Cloud Stream
最近在学习Spring Cloud的知识,现将消息总线:Spring Cloud Stream 的相关知识笔记整理如下.[采用 oneNote格式排版]
- 使用Sqlserver 2012 导出表数据为SQL脚本
目录 前言 具体步骤 前言 很多时候,我们需要把数控库中的表的数据导出成SQL脚本的情形.然后,在别的库执行的情况. 以下,总结使用Sqlserver 2012数据库中表数据导出成SQL脚本的步骤. ...
- 【spring boot】SpringBoot初学(7)– 多数据源及其事务
前言 github: https://github.com/vergilyn/SpringBootDemo 代码位置: 参考: Spring Boot Reference Guide , §77.2 ...
- linux服务基础之编译安装nginx
nginx源码下载地址: http://nginx.org/download/nginx-1.16.0.tar.gz //根据需要下载其他版本 1. 下载nginx # wget http://ngi ...
- Spark学习之路 (二十)SparkSQL的元数据[转]
概述 SparkSQL 的元数据的状态有两种: 1.in_memory,用完了元数据也就丢了 2.hive , 通过hive去保存的,也就是说,hive的元数据存在哪儿,它的元数据也就存在哪儿. 换句 ...
- 递归查询 start with connect by prior
1.语法:start with 子节点ID='...' connect by prior 子节点ID = 父节点ID 含义:查询结果我所有的后代节点(包括我) 例子: select id,parent ...
- IO流学习之字符流(二)
用字符流完成文档的复制: 测试文档: 代码1: package InputOutput; import java.io.FileReader; import java.io.FileWriter; i ...