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 ...
随机推荐
- com.google.gson json字符串的序列化与反序列化
经常做协议的时候用到json,个人习惯是定义协议文档,很少在这中场景中定义类,使用对象. 这里使用一个人物有名字,性别,有一个物品列表做个简单示例记录. 序列化 JsonObject jo=new J ...
- centos的安装与配置,Linux下基本命令、权限控制,解压缩文件以及软件的安装与卸载
centos安装与网络配置 关机:shutdown -h now 重启:shutdown -r now 或 reboot linux目录结构与操作命令 使用ls命令查看目录结构 目录查看: ls [- ...
- ansible基本使用(一)
ansible是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量 ...
- JavaScript 浅复制和深复制
浅复制只会复制第一层的元素,嵌套的元素还是原来的引用. const obj = { a: 1, b: 2 } const copyObj = Object.assign({}, obj) const ...
- Percona Xtrabackup 备份工具
生成备份 $ xtrabackup --backup --target-dir=/data/backups/ 注:--target-dir可以放在my.cnf配置文件中.如果指定的目录不存在,xtra ...
- 基于element-ui 模仿微信聊天页面以及滚动条隐藏在chrome和其他浏览器的处理
1.效果图 2.代码 <template> <div style=" overflow: hidden;"> <el-row> <el-c ...
- centos 源码编译mysql5.7
1- 源码安装mysql5.7 [自动安装脚本:https://files-cdn.cnblogs.com/files/lemanlai/make_mysql.sh] groupadd mysql u ...
- cf1176D
题意简述:数组a经过一系列操作之后获得数组b,给你数组b,构造出一个满足条件的数组a 操作如下从左到右扫描数组a,如果是一个素数,那么把第这个素数的素数加到数组a中,例如a[1]=2那么加3到数组a当 ...
- python 学习笔记之手把手讲解如何使用原生的 urllib 发送网络请求
urllib.urlopen(url[,data[,proxies]]) : https://docs.python.org/2/library/urllib.html python 中默认自带的网络 ...
- 写Blog的准备工作Window Live Writer
以下是博客园的帮助博客: Windows Live Writer配置步骤 感觉里面的几篇推荐文档都可以看一下,至于代码高亮插件,个人选择的还是SyntaxHighlighter. 一. 关于写blog ...