当前位置: 首页 > news >正文

vue路由原理

前端路由切换原理:本质就是监听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

相关文章:

  • idea常用快捷键和插件
  • 04_feign介绍(OpenFeign)
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • 长安链源码学习v2.2.1--ioc机制(九)
  • 面试必备:《Java 最常见 200+ 面试题全解析》
  • 抖音短视频运营规划内容孵化计划书模板
  • Leetcode 946.验证栈序列
  • CREO:利用CREO软件实现装配设计之四连杆机构设计案例应用(图文教程)之详细攻略
  • 基于数字孪生的智慧城市是如何发展的?
  • STL——list使用和模拟
  • 缓存怎么测试?
  • 智能控制理论及应用 王耀南等编著
  • 修改centos中Mysql( mariadb)数据默认存储位置
  • 神经网络编程教程入门课,人工神经网络编程内容
  • 零基础学Java有哪些必看书?推荐这5本
  • [deviceone开发]-do_Webview的基本示例
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • Git学习与使用心得(1)—— 初始化
  • Javascript基础之Array数组API
  • k8s 面向应用开发者的基础命令
  • Laravel 中的一个后期静态绑定
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • php ci框架整合银盛支付
  • SQLServer插入数据
  • 编写符合Python风格的对象
  • 技术发展面试
  • 区块链共识机制优缺点对比都是什么
  • 我感觉这是史上最牛的防sql注入方法类
  • 新手搭建网站的主要流程
  • FaaS 的简单实践
  • # centos7下FFmpeg环境部署记录
  • #NOIP 2014#Day.2 T3 解方程
  • (0)Nginx 功能特性
  • (42)STM32——LCD显示屏实验笔记
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (Oracle)SQL优化技巧(一):分页查询
  • (安卓)跳转应用市场APP详情页的方式
  • (待修改)PyG安装步骤
  • (附源码)springboot宠物医疗服务网站 毕业设计688413
  • (顺序)容器的好伴侣 --- 容器适配器
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (一)SpringBoot3---尚硅谷总结
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)关于pipe()的详细解析
  • .Net 垃圾回收机制原理(二)
  • .Net 知识杂记
  • .Net(C#)自定义WinForm控件之小结篇
  • .NET4.0并行计算技术基础(1)
  • .NET6 开发一个检查某些状态持续多长时间的类
  • .net反编译工具
  • .net生成的类,跨工程调用显示注释
  • .NET中GET与SET的用法