码迷,mamicode.com
首页 > 其他好文 > 详细

React-router0- spa理解和路由的理解

时间:2021-02-03 10:48:04      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:按钮   out   web应用   刷新   退出   oba   node   res   结构   

SPA理解:

1spa 理解:

  1 单页面web应用。(单页面多组件)

  2 整个应有只有一个页面。(标题区,导航区, 展示区,多页面:不同的页面进行切换,多个页面实现跳转,)      

  3 不会刷新页面,之会局部更新!!!about组件和 home组件进行交换。

  4 数据都需要ajax获取请求,在前端异步处理展现。(向发送请求给浏览器,动态切换展示区里面的内容) 

 

2 路由的理解:

Home浏览器的地址改成了 /home.

点击导航区的链接,不会引起页面的跳转。

浏览器的工作原理。

home ->组件

key -> value

path ->component

/home->home

 

一个路由就是一个映射关系(key:value)。(按钮以改变,路径一改变,key改变,找到value。)

key为路径,value可能是function或者component。

2 路由分类:

  1 后端路由:

    1)理解:value是function 用来处理客户端提交的请求。

    2) 注册路由:router.get(path,function(req,res))

    3) 工作过程: node接受的到一个请求,根据路径匹配到路由,调用函数来处理请求,返回响应 的数据。

  2 前端路由:

    

 

3 历史发展:

  BOM,DOM。 BOM里面有: window.history, 

  history.js库里面可以。

    pathname ,  key,hash,state,search。

   浏览器的历史纪录是一个栈的 结构 

  push test2 。压入,前进。 replace test3 ,把栈顶替换为 test3。

  回退: histroy.goBack, history.goForward()

  方法1 : 直接使用H5退出history身上的API。  方法2 :hash 锚点跳转。

 

React-router0- spa理解和路由的理解

标签:按钮   out   web应用   刷新   退出   oba   node   res   结构   

原文地址:https://www.cnblogs.com/hacker-caomei/p/14363201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!