简述一下路由的几种模式以及实现的原理

最新推荐文章于 2022-04-22 21:06:35 发布
最新推荐文章于 2022-04-22 21:06:35 发布
阅读量556 收藏
点赞数
文章标签： 前端框架 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66390045/article/details/124156113
版权

hash

1.url地址上有#

2.实现的原理:原生的hashChange事件,主要是通过事件监听hash值的变化

<a href='#/aaa'>1</a>
window.onHashChange=function(){}

3.刷新页面:不会发生请求,页面不会有任何问题,不需要后端配合

history

1.url地址上没有#

2.实现的原理:利用的history api来实现的 popState() pushState()来实现的

3.刷新页面:会发送请求然后会导致页面出现找不到404 需要后端配合解决

_菜鸟果果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Router路由模式的选择和底层原理
鸭绒的博客
04-17 1165
1.路由类型 Hash模式：丑，无法使用锚点定位。 History模式：需要后端配合，IE9不兼容(可使用强制刷新处理IE9不兼容) 即可以根据两种模式的特点来进行路由选择。比如：当你的页面需要很多锚点进行定位时< a href="#new_paper" />，点击改链接跳转到页面的新闻部分，那么Hash模式是无法实现的，因为它自身带了#。 2.底层原理 如果我们去看Vue-Router的底层代码可能会优点晦涩难懂，下面总结以下底层原理，有哪些方式可以触发路由的更新呢？下面这张图一目了然：
路由的实现原理是什么？
weixin_43912756的博客
09-09 2301
1、概述路由 路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源 实现原理：检测url的变化，截获url地址，然后解析来匹配路由规则 2、hash模式 其底层源码，主要是通过添加url的hash变化的监听器来实现，通过hashchange事件的触发知道hash值发生了哪些变化，通过transitionTo匹配路由，并通过路由配置，跳转到新的视图组件。 当浏览器历史返回或者直接输入链接跳转时，会触发hashchange事件；刷新页面时不会触发hashchange，会用load
路由的两种模式实现原理
qq_45803050的博客
03-12 428
路由的两种模式实现原理 两种模式 hash 和 history： 总结： 可参考： https://juejin.cn/post/6844903615283363848
路由实现原理
楠姐的博客
07-02 1730
Vue Router 路由实现原理 一、概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、实现方式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash — 利用 URL 中的hash("#"); 利用 History interface 在HTML5中新增的方法。 Vue 中，它是通过 mode 这一参数控制路由的实现模式： const router=new VueRouter({ mode:'history'
路由器工作原理 路由模式
05-12
个人制作的ppt路由器工作原理内容很详细工工工工工工工工工工工工工工工工工工工工式工工工工工工工工工工工工工工工工工工工工工工工工工工工工工式工工工工工工工工工工工工工工工工工工工工工工工工工工工工工式工工工工工工工工工工工工工工工工工工工工工工工工工工工工工式工工工工工工工工工工工工工工工工工工工工工工工工工工工工工式工工工工工工工工工
Django CSRF认证的几种解决方案
09-17
### Django CSRF认证的几种解决方案 #### 一、CSRF攻击简介与原理 CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的安全威胁，尤其在网络应用中较为常见。简单来说，CSRF攻击是攻击者利用受害者的...
网络地址转换工作原理及基本配置
06-18
NAT的基本工作原理涉及以下几个关键概念： - 内部局部IP地址（Inside Local Address）：内部网络中设备的私有IP地址。 - 内部全局IP地址（Inside Global IP Address）：代表内部网络对外的公网IP地址。 - 外部全局...
前端必背面试宝典，总结89页的面试题
10-13
：通过 Hash 模式或 History 模式来实现路由跳转。 * 怎么定义 vue-router 的动态路由？：使用路由参数和 query 传递参数。 * 请描述vue-router路由守卫的作用？：控制路由的导航守卫和离开守卫。 三、vuex * 什么...
互联网高频Java后端面试题20道（适合1~3年）V1.0.80.docx
最新发布
01-30
涵盖了多态性、Spring 框架、Spring Boot 特点、微服务架构、MyBatis 原理、JVM 工作原理、线程池、HTTP与HTTPS协议、JUnit、数据库事务、RESTful API、设计模式、Docker、NoSQL数据库（MongoDB）、Lambda表达式、...
2022计算机系统基础期末试题 西北工业大学
09-30
本课程将教授网络基础知识，包括网络层次模型、协议栈、路由选择算法等内容，使学生能够理解数据在网络中的传输过程及其实现方式。 4. **数据库系统**：数据库系统是用于存储和管理大量数据的重要工具。本课程会...
vue路由的实现模式
雪落凡尘
08-01 187
路由：改变url但是不重新请求而刷新视图 1.hash模式 在url里面“#”后面的称为hash，用window.location.hash读取 2.history模式 history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致 ...
vue的两种路由模式原理
混世小妲己
08-08 6949
1、hash模式：原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片段 2、history模式：根据history api中的pushState,replaceState两个方法。 通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这...
前端路由的实现方式
weixin_33690367的博客
12-13 158
前端路由与单页页面 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。 传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。 单页应用，就是只有一个页面，用户访问一个网址，服务器返回的页面始终只有一个，不管用户改变了浏览器地址栏的内容或者在页面内发生了跳转，服务器不会重新返...
路由的模式 以及原理 区别
一个比较懒散的IT男
04-22 80
⾯试官您好,接下来我给您介绍⼀下vue的路由模式,vue的路由模式⼀共有两种,分别是哈希和history.他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合. history的原理就是利⽤ht ...
hash模式与history模式
weixin_30527323的博客
08-20 595
随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。 从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）： 记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）； 可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之...
路由的模式（history 和 hash） 区别以及原理
GikQxx21_wen的博客
04-22 3598
区别 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. 原理 history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的.以上就是我对
【计算机网络】实验六路由器静态路由、默认路由的配置
热门推荐
ping
05-16 1万+
实验六 路由器静态路由、默认路由的配置 一、实验目标 掌握静态路由、默认路由的配置方法和技巧； 掌握路由配置实现网络的连通性方法； 熟悉广域网线缆的连接方式； 二、实验背景 郑州某中学有2个校区，每个校区是一个独立的局域网，为了使二个校区能够相互通讯，共享资源，通过给路由器R1、R2配置静态路由、默认路由使全网实现互通、互访。 ...
Vue Router的路由模式hash和history的实现原理
刘炳全的博客
10-18 4171
一、Vue-router 中hash模式和history模式的关系 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。 对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 二、hash模式实现原理 早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#
php中的route请求,详解Laravel之路由请求方式、路由传参
weixin_29090089的博客
03-11 3386
下面由Laravel教程栏目给大家介绍Laravel之路由请求方式、路由传参,希望对需要的朋友有所帮助！1、路由请求方式____文件路径app->routes->web.php//get请求方式Route::get('user/show',function(){return '世间安得两全法，不负如来不负卿；万般皆是命，半点不由人';});//post请求方式Route::post('...
简述前端路由的实现原理
05-30
前端路由实现的基本原理是通过监听 URL 的变化，根据 URL 的不同，显示相应的页面内容，而不需要发送请求到服务器，从而提升网页的性能和用户体验。 实现前端路由的关键是实现 URL 的监听和页面内容的切换。在现代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值