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

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

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

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


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


内容简介

一、后端路由

二、前段路由

三、URL中的hash(井号)

 

一、后端路由


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

 

二、前段路由


对于单页面应用程序来说,主要通过URL的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的哈希值。

相关文章
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
2月前
|
JavaScript 前端开发 测试技术
Redux 动态路由与传统路由的区别
【10月更文挑战第22天】Redux 动态路由在路由状态管理、数据加载与关联、组件渲染与更新、路由参数处理、导航与历史管理、可测试性以及代码结构与可维护性等方面都具有明显的优势,能够为开发者提供更强大、更灵活和更易于维护的路由解决方案,尤其适用于大型复杂的前端应用开发。
35 2
|
安全 API
路由的作用
路由的作用
66 1
|
网络架构
路由转发(详细理解+实例精讲)
本文详细的介绍路由转发,内含详细的实例解析,该文你值得拥有。
|
前端开发 JavaScript Java
关于前端路由我所知道的
关于前端路由我所知道的
96 0
|
缓存 监控 前端开发
|
消息中间件 RocketMQ 开发者
路由发现和小结|学习笔记
快速学习路由发现和小结
路由发现和小结|学习笔记
|
前端开发 JavaScript 开发者
路由-前端路由和后端路由的概念|学习笔记
快速学习路由-前端路由和后端路由的概念
178 0
路由-前端路由和后端路由的概念|学习笔记
|
前端开发 网络架构
前端工作小结49-动态路由
前端工作小结49-动态路由
69 0
前端工作小结49-动态路由
|
前端开发 网络架构
前端工作小结38-动态路由
前端工作小结38-动态路由
120 0