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)？的更多相关文章

  1. React SPA 应用 hash 路由如何使用锚点

    当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash ...

  2. 在vue中获取微信支付code及code被占用问题的解决？

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...

  3. Vue中常见参数传递方式

    文章内容:这里只有vue中父子组件传参.路由间的传参 (另外还有vuex.储存本地.中央bus等方式) 一.父子组件 1.1父传子(props) <!-- 父组件father.vue --> ...

  4. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  5. H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  6. vue中的组件，Component元素，自定义路由，异步数据获取

    组件是Vue最强大的功能之一.组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DO ...

  7. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  8. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  9. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

随机推荐

  1. C语言再学习part2-重新认识C语言词汇

    迷阳迷阳,无伤吾行.无行郗曲,无伤吾足.—庄子 C语言词汇: 标识符 在程序中的变量名.函数名.标号等等成为标识符.其中标识符相在C中只能是字母A~Z,a~z,数字0~9,下划线(_)组成的字符串,并 ...

  2. 秋水逸冰实用Linux脚本收藏

    秋水逸冰的脚本非常受欢迎,奈何其本人博客已经不能访问(目前是这样,不知道别的地区是否能访问),实际上GitHub上他本人一直在维护,因为某些原因不放出他本人的GitHub地址.截止到2019年12月1 ...

  3. Unity容器实现AOP面向切面编程

    为什么要有AOP 需求总是变化的,比如经常会对一些方法后期增加日志.异常处理.权限.缓存.事务的处理,遇到这种情况我们往往只能修改类. 为了应对变化,我们常常使用设计模式解决,但是也有其局限性:设计模 ...

  4. python 复习 day1

    import timeimport json # 二:嵌套取值操作students_info=[['egon',18,['play',]],['alex',18,['play','sleep']]] ...

  5. MySQL概述及入门(一)

    MySql概述及入门(一) 什么是MySQL?    MySQL是当今主流的关系型数据库管理系统(记录是有行有列的数据库) , 可以与Oracle 和SQL Server 竞争 , 是最好RDBMS( ...

  6. mongoose中Documents的save方法

    调用save方法保存数据有的时候是插入有时候是更新, 数据库 我知道save在保存的时候会检测数据的更改,只是更新更改的部分.所以我重复save时,只是createAt更改那么我最后只应该保存了一条数 ...

  7. SpringBoot学习- 11、更好用的代码生成工具EasyCode

    SpringBoot学习足迹 之前的mybatis代码生成工具无法自定义模板,找了一个可以自定义模板的插件,初学者最好用比较齐全的代码生成工具,不然拼错一个代码会掉坑里半天爬不出来. 有的同学会说干么 ...

  8. Dom中的一些接口

    节点都是单个对象,有时需要一种数据结构,能够容纳多个节点.DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection.这两种集合都属于接口规范.许多 DOM 属性和方法 ...

  9. yii2 response响应配置

    response参数配置 方式一.全局配置 用于接口开发 适用:只有所有请求都是application/json类型时可用. $config = [ 'components' => [ 'res ...

  10. Java第四节课总结

    动手动脑1:如果类提供了一个自定义的构造方法,将导致系统不再提供默认构造方法.Foo obj1=new Foo()在此处调用应增加参数. 动手动脑2:静态初始化块只执行一次.创建子类型的对象时,也会导 ...