前端路由(一) 路由,hash,history
从vue-router回溯相关原理和知识点
前端路由(二)hash实现路由示例
什么是路由
- 路由是URL解析对应的函数的映射
从用户的角度看:
- 记录当前页面状态,例如保存当前页的url再次打开url时,网页还是保存时的状态
- 可以使用浏览器无刷新的前进后退功能,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态
从开发的角度:
- 改变url且不让浏览器向服务器发出请求,非ajax无刷新更新视图区域内容
- 监测url变化
- 截获url地址,解析出需要的信息来匹配路由规则
什么是服务端路由
- 收到客户端发来的HTTP请求时根据请求的URL找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端
- 对于简单的静态资源服务器相当于URL的映射函数就是一个文件读取操作
- 对于动态资源映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理
什么是客户端路由
- 路由的映射函数通常是进行一些DOM的显示和隐藏操作当访问不同的路径的时候,会显示不同的页面组件
- vue-router等相当于一个容器,路由控制器,管理所有路由与组件(或函数)之间的映射
- 前端路由基于hash & history
hash模式
hash指url后的#号及后面的字符(例如https://www.baidu.com/#/liv
),这里的#和css里的#是一个意思,hash也称作锚点,本身是用来做页面定位,hash可以使对应的id的元素显式在可视区域内
由于hash值变化不会让浏览器向服务器发出请求,而且hash改变会触发浏览器的hashchange事件,浏览器的前进后退也能对其控制,在html5的history出现前,使用hahs来实现前端路由
api:
widnow.location.hash = '/qq' 设置 url 的 hash,会在当前url后加上 '#/qq'var hash = window.location.hash // '#/qq'window.addEventListener('hashchange', function(){//监听hash变化,点击浏览器的前进后退会触发})
复制代码
history模式
相对于history模式,hash则可以兼容到IE8,history只能兼容到IE10
hash本来是用于做页面定位,如果用于实现路由,则原来的锚点功能就不可用
hash是基于url传参,如果要传递复杂的数据,会受限于体积限制 history可以在url里放置参数,还可以将数据存放在一个特定的对象中
vue-router官方文档说 , 不想要很丑的hash,可以用路由的history模式
api:
window.history.pushState(state, title, url)
// state 需要保存的数据,该数据在触发popstate事件时,可以在event.state里获取
// title 标题,一般传null
// url 设定新的历史记录的url,新的url与当前的url的origin必须一致,否则报错,url可以使绝对路径或者相对路径
// https://www.baidu.com/a/ 执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/
// 执行history.pushState(null, null, '/qq/'),则变成https://www.baidu.com/qq/window.history.replaceState(state, title, url)
// 修改当前历史记录,pushState是创建新的历史记录window.addEventListener('popstate', function(){//监听浏览器前进后退时间, pushState与replaceState方法不会触发
})window.history.back()//后退
window.history.forward()//前进
window.history.go(1)// 前进一步,-2后退两步
window.history.lengthk//查看当前历史堆栈中页面的数量
复制代码
history模式改变url的方式会导致浏览器向服务器发送请求, so, 需要在服务器端做处理 , 匹配不到任何静态资源的时候 , 服务器端始终向客户端返回同一个html的页面
前端路由(一) 路由,hash,history相关推荐
- 前端路由以及浏览器回退,hash history location
一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
- 前端js实现路由切换页面 pushState replaceState
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变,但不会让浏览器刷新页面. pushState 会追加浏览器的路由历史,但不会刷新页面,可以用这种 ...
- redirect路由配置 vue_Web前端:Vue路由进阶配置
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:Vue路由进阶配置",有兴趣做前端的朋友,和我一起来看看吧! 1. 页面打开权限流程 页面是否能打开有以下两点判断: 1 ...
- 前端文件path路由:基于base引用
基于base引用css.js文件: 代码示例: <head> <base href="http://www.server_name.cn/project_name/&quo ...
- Vue-5 路由参数的传递和获取(query 和 params),导航守卫和路由元信息,History模式
Vue-5 路由传参的几种方式(query和params),获取路由参数,导航守卫和路由元信息,History模式 除了 props 和 $emit 之外,路由时也可以携带数据,即通过路由传参. 一. ...
- php 前端页面的路由,ThinkPHP5路由
路由作用 1.根据实现定义的路由规则,检验URL请求,确定执行或者拒绝: 2.路由规则可自定义,隐藏了原URL地址,使访问地址,使访问更安全,地址更优雅. 路由模式 开启路由后,其实只有二中状态,要么 ...
- vue路由之路由的两种模式
文章目录 简介 hash路由 history模式 两种模式的比较 history存在的问题 专栏目录请点击 简介 一般路由分两种形式 一种是哈希路由,最明显的特征就是路由中有一个# 还有一种就是his ...
- Vue3(撩课学院)笔记07-vueRouter路由,创建路由,路由重定向,路由跳转,动态路由,路由懒加载,路由嵌套,路由参数穿传递的两种形式,通过事件来跳转路由
1.vueRouter路由的两种模式 哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求 历史模式:putstate()和replaceState()方法入 ...
- 【vue | 路由】路由的基本概念与原理
文章目录 路由的基本概念与原理 路由 一:后端路由:由服务器端进行实现,并完成资源的分发 二:前端路由:依靠hash值(锚链接)的变化进行实现 1:实现简易前端路由 2:HTML5的history模式 ...
最新文章
- “生于忧患,死于安乐”之程序员人生
- python怎么解释语言_python属于解释语言吗
- 微机常见硬盘故障分析及检测
- 音视频播放、录音、拍照
- c语言实验五函数答案,C语言程序设计实验五 参考答案.doc
- 14日晚8点直播丨 经典知识库:性能优化那些事
- JVM GC(垃圾回收机制)
- 最新sql 2008安装说明 以及 重设sql server 2008 R2的登录密码
- JavaScript 进阶技能,中高级前端必备
- PHP完全自学手册01.pdf
- 【深度学习】模型平均误差分析
- 数据挖掘——数据可视化
- 互联网+智慧公安大数据一体化解决方案
- 论AI在叮咚智能音箱中的演进和应用
- 机器学习笔记——神经网络与深度学习
- 【工大SCIR笔记】自然语言处理领域的数据增广方法
- ffmpeg重采样中swr_convert和swr_get_out_samples的用法
- 英语知识系列:按发音规律重排的英语音标
- 深圳云计算培训:新手学习云计算的规划
- 大数据时代医疗大数据建设,主要存在哪些问题?
热门文章
- 2、ESXI安装出错
- mybatis调用oracle存储过程
- 阮征:互联网金融下的智能客户服务探索
- 普加甘特图集成到第三方JS框架(MiniUI、jQuery、Ext等)
- 原创,真正解决iframe高度自适应的问题.兼容各浏览器
- domino大百科常见问题总汇1(转载)
- 输入法项目-用delphi生成GBK 中文编码 GBK 扩充汉字编码表(3) GBK/3: $8140 —$A0FE(部分)...
- js和Java分别正则匹配小数点后多余的0
- [CareerCup] 17.7 English Phrase Describe Integer 英文单词表示数字
- 自定义Spinner之IconSpinner