vue-router路由模式的区别和原理
vue-router路由模式
一、vue-router前端路由有两种模式,hash模式和history模式
hash模式
就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。
由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange
事件(hashchange
只能改变 # 后面的 url片段);虽然 hash路径出现在URL中,但是不会出现在 HTTP请求中,对后端完全没有影响,因此改变 hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。
history模式
包含 back、forward、go方法;history 模式 URL就要和后端进行一致,所以要改为 history也需要后端的配合,否则会报错;history 每次刷新会重新向后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。
二、原理
hash 原理:灵活运用了 html的瞄点功能,改变 # 后的路径本质上是更换了当前页面的瞄点,所以不会刷新页面。通过监听浏览器的 onhashchange()
事件变化,查找对应的路由规则。
history 原理: 利用 H5的 history中新增的两个API :pushState()
和 replaceState()
和一个事件onpopstate
监听URL变化。
三、优缺点
hash模式
优点:
- 兼容性强,达到 IE8;
- 除发送 ajax和资源请求外不会发送其他多余请求;
- 改变 # 后的路径不会自动刷新页面;
- 无需服务器进行配合;
缺点:
- 访问路径上包含 # ,不美观;
- 对于需要锚点功能的需求会与当前路由机制发生冲突;
- 重定向操作时,后段无法获取 url完整路径;
history模式
优点:
- 符合 url 地址规范,没有 # ,使用起来比较美观;
- 后端可以获取到完整的路由信息;
- 可以使用 history.state获取完整的路由信息;
- 可以进行修改历史记录,并且不会立刻向后端发起请求;
缺点:
- 兼容性只到IE10;
- 改变 url路径后会重新请求资源;
- 若访问的路由地址不存在时会报404,需服务端配合支持重定向返回统一的404页面;
如果对于项目没有硬性标准要求,可以直接使用 hash模式开发。
vue-router路由模式的区别和原理相关推荐
- Vue Router路由模式的区别 进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- Vue-Router前端路由的两种模式、区别、原理?
vue路由有⼏种模式?有什么区别?原理是什么? 一.vue路由有几种模式? 二.两者区别 三.原理 一.vue路由有几种模式? vue的路由模式⼀共有两种,分别是哈希和history 二.两者区别 哈 ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- 【Vue】相关生态——Vue Router路由
Vue Router路由 基本使用 带参数的动态路由匹配 捕获所有路由或404 Not found 路由 嵌套路由 编程式导航 重定向和别名 将props传递给路由组件 不同的历史模式 进阶 导航守卫 ...
- Vue Router路由常用功能总结
Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...
- 路由器NAT模式和路由模式的区别
1.信息交换不同 路由器NAT模式不进行路由信息交换,路由模式可以进行路由信息的交换. 2.原理不同 路由器NAT模式是指内网与外网经过了网络地址转换,它们之间是不进行路由交换的. 路由器的路由模式是 ...
- Vue.js 3.0 学习笔记(十一)Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
- vue router 路由跳转方法概述
一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router- ...
最新文章
- 欢聚时代java面试_欢聚时代面试经验
- oracle spatial 数据导入_【转】 Oracle Spatial 基本操作
- oracle在数据表中获取年月日时分秒
- 简单封装POI导出excel
- A加载B,B发生的变化
- java基础知识的一些细节问题
- jms.jar 2.0_JMS API 1.1生产者和使用者
- Windows下JNI的使用教程
- php检查数组下标是否,php检查数组下标是否存在
- 剪切板 html 查看器,如何打开剪贴板查看器
- 6.1 PyTorch简单二分类模型
- 服装行业个性化服务:订阅电商鼻祖Stitch Fix商业模式中的个性化推荐分析
- MongoDB集群节点RECOVERING故障恢复
- sql 数据存在包含关系的查询
- Dubbo项目消费者调用提供者报cannot be cast to com.baomidou.mybatisplus.core.metadata.IPage
- Linux开源存储全栈详解:从Ceph到容器存储
- MATLAB图像去雾处理系统
- 字符串分割【Java】
- [附源码]java毕业设计企业职工福利发放管理系统
- 水星无线网卡UD198H Ubuntu20.04 驱动安装
热门文章
- R329利用X11+SSH无屏幕显示任意窗口(适用于绝大多数linux系统)
- input 属性为 number,maxlength不起作用如何解决?
- turbine 集群聚合监控
- 方正教务系统自动评价
- fat32文件系统的实现与buddy算法
- android linearlayout属性大全,Android中LinearLayout布局的常用属性总结读书笔记
- npm警告:WARN config init.module Use `--init-module` instead.
- 教程篇(5.4) 06. FortiAnalyzer SQL和数据集 ❀ Fortinet 网络安全专家 NSE5
- 大数据项目之_15_电信客服分析平台_0102_项目背景+项目架构+项目实现+数据生产+数据采集/消费(存储)
- 大数据学习笔记之十五 云计算之软件定义网络