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

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

开发者学堂课程【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的哈希值。

相关文章
|
前端开发 JavaScript 开发者
路由-前端路由和后端路由的概念|学习笔记
快速学习路由-前端路由和后端路由的概念
183 0
路由-前端路由和后端路由的概念|学习笔记
|
前端开发
关于前端路由与后端路由的区别简介
关于前端路由与后端路由的区别简介
252 0
关于前端路由与后端路由的区别简介
|
2月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
前端开发 JavaScript Java
关于前端路由我所知道的
关于前端路由我所知道的
101 0
|
前端开发
前端路由(五)3
前端路由(五)3
前端路由(五)3
|
前端开发
前端路由(五)2
前端路由(五)2
113 0
前端路由(五)2
|
移动开发 前端开发 数据可视化
浅谈前端路由🏃
浅谈前端路由🏃
|
前端开发 JavaScript 开发者
前端路由
回顾下 前端的基础路由 有助于理解 SPA 单页应用 单页应用 可以看 掘金 简书-IT技术 可以在不跳转页面的情况下 修改浏览地址以及历史记录 这就是底层 vue react router原理
119 0
|
移动开发 前端开发 应用服务中间件
前端路由那些事
谈到路由,一般分为前端路由和后端路由两种,后端路由指的当用户通过浏览器切换不同URL时,都会向服务器发起资源请求,服务器通过后端路由匹配之后根据不同URL返回不同页面,而前端路由则将浏览器与服务器交互(页面跳转的URL规则匹配)的任务交给前端来做
360 0
前端路由那些事
|
缓存 监控 前端开发