vue路由原理

news/2024/4/26 5:30:55/文章来源:https://blog.csdn.net/weixin_39547000/article/details/126619087

前端路由切换原理:本质就是监听url的变化,然后匹配路由规则,显示相应的页面,并且不刷新页面。目前单页面应用实现路由的方式只有俩种:
hash模式
history模式
hash模式相当于瞄点跳转。监听url#后面的传值发生变化,从而触发window.hashchange方法。并根据值修改暂时页面的内容。不会刷新页面请添加图片描述
history模式相对hash模式更加符合我们常见的url格式。原理是触发了原生的window.history方法。
简单介绍一下window.history都有哪些方法
history.forward 历史记录前进
history.back 历史记录后退
history.go 历史记录 跳转n步 -n后退n步 n前进n
history.pushstate 向历史记录添加一条记录
history.replacestate 替换当前页页面上的信息
window.onpopstate事件,用户操作前进后退按钮的时候,监听当前url的变化,从而修改页面内容
history模式可以简单理解为,我们针对超链接进行改造,给每一个超链接添加一个onclick点击事件。阻止超链接默认跳转的事件。使用history.pushstate和history.replacestate的方法,更改浏览器的url,修改页面内容。从而实现单页面应用不刷新的需求。请添加图片描述

hash模式和history模式的区别

history模式更加优雅,更加美观,hash模式比较丑
history模式跳转当前路由会在历史记录里新增加一条。而hash模式只有在跳转路由与当前路由不一致时才会增加
history模式刷新页面会向服务器发送请求。所以需要后端服务配合重定向,否则会报页面404,hash模式则不会,只是执行load事件
hash模式兼容到ie8,history模式兼容到ie10

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_3459.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea常用快捷键和插件

快捷键 查看父子关系图:ctrlaltu 全局搜索ctrlshirtF 全局替换:CtrlshirtR 插件 汉化Chinese 配置文件yml转properties 代码预览插件: MyBatis增强插件:MybatisX 快速定位接口工具(RestfulToolkit-fix) 安装之后使用快捷键"Ctrl\"或"CtrlAltN"调出搜…

Leetcode 946.验证栈序列

1.题目描述 给定 pushed 和 popped 两个序列,每个序列中的 值都不重复,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true;否则,返回 false 。 输入:pushed [1,2,3,4,5…

基于数字孪生的智慧城市是如何发展的?

数字孪生是指充分利用物理模型、传感器更新、运行历史等数据,集成多学科、多尺度、多概率的仿真过程,在虚拟空间中完成映射,从而反映相对应的实体装备的全生命周期过程。简而言之,数字孪生就是在一个设备或系统的基础上创造一个克…

零基础学Java有哪些必看书?推荐这5本

零基础学Java初学者,想要入门,应该多看一些关于Java的书,先充实理论基础。然而Java的技术知识是海量的,市面上关于Java的书令人眼花缭乱,零基础的小白完全不知道该看哪本书。那么,零基础学Java有哪些必看书…

阿里巴巴微服务核心手册:Spring Boot+Spring cloud+Dubbo

前言 微服务作为一项在云中部署应用和服务的新技术已成为当下最新的热门话题。但大部分围绕微服务的争论都集中在容器或其他技术是否能很好的实施微服务,而红帽说 API 应该是重点。 企业和服务提供商正在寻找更好的方法将应用程序部署在云环境中,微服务…

opencv-python之位平面分解与数字水印

位平面分解与数字水印位平面分解与数字水印位平面分解1.图像预处理2.构造提取矩阵3.位平面提取4.阈值处理5.显示图像简单的数字水印1.载体图像预处理2.水印图像处理3.水印添加4.水印提取位平面分解与数字水印 两张素材: 位平面分解 图像矩阵中的每个值是一个八位二进制数&…

技术分享 | 黑盒测试方法论—等价类

等价类划分是一种重要的、常用的黑盒测试方法,不需要考虑程序的内部结构,只需要考虑程序的输入规格。它将不能穷举的测试过程进行合理分类,从而保证设计出来的测试用例具有完整性和代表性。需要把用户所有可能输入的数据,划分成若…

JAVA----钉钉机器人消息样式,关于PC 端与手机端文字消息样式显示不统一

关于PC 端与手机端文字消息样式显示不统一 颜色 String message "<font color#e60020>" 欢迎您加入公司&#xff01; "</font>";不加引号 或 加双引号String message "<font color\"#e60020\">" 欢迎您加入公…

新课标、新考法,猿辅导创新教育研究院全面拆解新课标

“义务教育课程方案和课程标准&#xff08;2022 年版&#xff09;”&#xff0c;也就是众多周知的“新课标”已于今年4月正式颁布。近日&#xff0c;各地的2022秋季学期已陆续开学&#xff0c;这版新修订的义务教育课程也将进入实施阶段。那么&#xff0c;这版新课标究竟有哪些…

RocketMQ的架构设计

目录 1 、技术架构 2、部署架构 2.1、RocketMQ 网络部署特点 2.2、结合部署架构图&#xff0c;描述集群工作流程&#xff1a; 1 、技术架构 RocketMQ架构上主要分为四部分&#xff0c;如上图所示: Producer&#xff1a;消息发布的角色&#xff0c;支持分布式集群方式部署。…

图神经网络(三):数学基础

一.复数空间 在实数空间中&#xff0c;加法、减法可以看成是沿数轴的左右平移&#xff0c;乘法、除法可以看成是沿数轴的拉伸和压缩。但是在现实生活中除了平移和缩放以外&#xff0c;还存在旋转。在复数发明之前&#xff0c;处理旋转问题是非常麻烦的。 1.复数的定义 i2i^2i…

yolo系列之yolov3(3)

文章目录前言v3改动backBone先验框的设定改变特征图的提取loss函数的修改softmax 改进MSE 和交叉熵损失函数前言 v1和v2可以参考前两篇文章v1&#xff1a;https://blog.csdn.net/monk96/article/details/126603180?spm1001.2014.3001.5502v2:https://blog.csdn.net/monk96/ar…

Redis 非关系型数据库学习(三)---- Redis 基础知识

文章目录Redis 非关系型数据库学习&#xff08;三&#xff09;---- Redis 基础知识&#xff08;1&#xff09;Redis 数据库select 切换当前数据库Dbsize 查看数据库key数量&#xff08;2&#xff09;查看数据库的keykeys [partten]&#xff08;3&#xff09;清除数据库的 keyfl…

【沐风老师】3DMAX散布插件scat_pro v1.1使用教程

【ScatPro简介】 3DMAX超级散布插件ScatPro是一个max脚本小工具&#xff0c;可以帮助你散布3D对象到曲面。在家具建模、建筑建模方面都有很大的帮助&#xff0c;可以提高工作效率。 ScatPro插件非常适合编织类建模&#xff0c;这将大大解放我们的双手&#xff0c;提高工作效率…

http和tcp

http http - 浏览器和服务器交互的超文本传输协议 https - http ssl (建安全通道,确保数据传输&#xff0c;网站真实性) http 80 身份容易被伪装 内容容易被篡改窃取 收集流动的数据包且解析&#xff0c;可以交给抓包工具 Https 443 需证书费用高 对传输内容进行加密 身份认证…

【RabbitMQ学习笔记】第一章 MQ的基本概念

文章目录1、MQ概述2、MQ的优势3、MQ的劣势4、常见的MQ产品1、MQ概述 MQ全称Message Queue&#xff0c;消息队列&#xff0c;是在消息的传输过程中保存消息的容器&#xff0c;多用于分布式系统之间进行通信。 2、MQ的优势 总结六个字&#xff1a; 解耦、异步、削峰 优势说明…

2022几款开源的态势感知、攻击监控、日志分析等平台调研

目录态势感知、攻击监控、日志分析等平台调研一. OSSIM开源安全信息管理系统功能展示主界面1. DASHBOARDS模块a. OverViewb.Deployment status&#xff1a;资产部署的分类及状态信息c. Risk Mapsd. Open Threat Exchang&#xff1a;在地图中显示OTX变化趋势及IP信誉2. ANALYSIS…

javaweb JAVA JSP汽车销售系统商城购物系统jsp购物系统购物商城系统源码(jsp电子商务系统)网上汽车

JSP汽车销售系统商城购物系统jsp购物系统购物商城系统源码&#xff08;jsp电子商务系统&#xff09;网上汽车

打破平台限制,小程序如何在硬件设备上运行?

在小程序技术日益成熟、生态日益善的前景下&#xff0c;运营者们发现小程序“即用即走、轻量开发”的特点非常契合各种硬件设备的使用场景&#xff1b;开发者们对“一次开发&#xff0c;多端运行”的诉求也变得越来越强烈。 当前在微信、百度、支付宝、今日头条等各大巨头都把…

解决Oracle报错ORA-01403: 未找到任何数据

发现问题 今天在执行某个存储过程的时候&#xff0c;遇到一个报错&#xff0c;提示我ORA-01403: 未找到任何数据 如图所示 问题分析 因为我的报错信息表里有记录着具体的报错位置&#xff0c;所以我很快的能够定位到问题所在&#xff0c;感觉这样找问题真的挺方便的&#x…