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 ...
随机推荐
- Electron+Vue – 基础学习(1): 创建项目
Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...
- junit 常用注解 + junit 断言详解
@Test: 在junit3中,是通过对测试类和测试方法的命名来确定是否是测试,且所有的测试类必须继承junit的测试基类.在junit4中,定义一个测试方法变得简单很多,只需要在方法前加上@Test ...
- 快速读写模板(int)
一.快速读入模板(int) inline int read(int x){ char ch=getchar(); int x=0,f=1; while(ch>='9'||ch<='0'){ ...
- 两分支部署Hexo
最近把原本部署在GitHub上的hexo同时部署到码云上,速度快到飞起. 可做对比,我的GitHub Pages像乌龟一样慢吞吞,我的Gitee Pages像兔子一样敏捷. 使用hexo,如果换了电脑 ...
- 优酷爱奇艺视频转换为MP4格式工具
本君今天分享两个免费的视频格式转换工具,分别是爱奇艺和优酷的(腾讯的有点复杂,等整理完再分享).教程都是一步步亲手操作的,每一步都有配图.希望各位老板多转发分享,谢谢! 一爱奇艺QSV转MP4格式 解 ...
- nvm Nodejs 版本管理器 安装及配置
1.如果已安装nodejs请先卸载干净 nodejs:删除C:\Program Files\nodejs 文件夹 npm:删除C:\Users\{用户名}\AppData\Roaming\npm 文件 ...
- AT1219 歴史の研究[回滚莫队学习笔记]
回滚莫队例题. 这题的意思大概是 设 \(cnt_i\) 为 l ~ r 这个区间 \(i\) 出现的次数 求\(m\) 次询问 求 l~r 的 max {\(a_i\) * \(cnt_i\)} \ ...
- ural 2124
题意 ural 做法 求出一个原根\(\omega\),对于每个数\(x\)写成\(x=\omega^{k}\)的形式,\(\delta(x)=\frac{p-1}{k}\) 我们不关心群具体的东西, ...
- Magento 2 中请求( Request ) 后执行的基本过程
入口 :index.php 引导 Bootstrap::run() 定义于 ./vendor/magento/framework/App/Bootstrap.php 用于 index.php 应用 ...
- TTradmin v2.1 【2019年12月12日更新】简单好用的临时远程协助软件
TTradmin 是一款免端口映射可直接穿透任何内网,基于VNC核心的即时远程协助软件.在使用的时候只需要保证“协助端”和“被协助端”使用同一个验证码即可实现安全便捷的远程控制,不需要进入路由 ...