路由-前端路由和后端路由的概念|学习笔记

简介: 快速学习路由-前端路由和后端路由的概念

开发者学堂课程【Vue.js 入门与实战路由-前端路由和后端路由的概念】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8190


路由-前端路由和后端路由的概念


内容简介

一、后端路由

二、前段路由

三、URL中的hash(井号)

 

一、后端路由

对于通的风些一所本的超时技都是 URL 地址,所有的 URL 地址都对应服好器上对应的资源;

 

二、前段路由

对于单页面应用程序来说,主要通过 UR L 的 hash#来实现不向页面之间的切换,同时 hash 有一个特点:HTTP 请求中不会包会 hash 根关的内容所以,单页面程序中的页面跳转主要用 hash 实现

在单页面应用程产中,这种通hash 改变切换页面的方式称作前端路由(区别于后端路由) :

Hash 就是在网页网址后面加上#/log,如下图:

image.png

 

三、URL 中的 hash(井号)

#代表网页中的一个位置,其右边的字符,就是读位置的标识符,比如:

http://www.example.com/index.html#print

就是代表 index.html 中的 print 位置。浏览器会自动把 print 位置滚动到页面可视区域内。

设置方法:

Step1:设置一个锚点#print>定位到print位置

Step2:在页面需要定位的内容加上id=“print”,例如:

print>

测试:step1设置的锚点,step2 中的 id 为 print 的内容会滚动到页面顶端(可观察滚动条的距离),同时,页面的 url 末端中会出现 #print 的哈希值。

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
46 0
|
14天前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
21天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
54 1
|
2月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
22 1
|
2月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
2月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
35 0
|
2月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
607 0
|
2月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
166 2

热门文章

最新文章