前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BackboneJs入门学习[08]—Router路由初探

BackboneJs入门学习[08]—Router路由初探

作者头像
前端修罗场
发布2023-10-07 16:22:43
1140
发布2023-10-07 16:22:43
举报
文章被收录于专栏:Web 技术

BackboneJs入门学习—Router路由初探

1.理解 Router 在页面中,通常有分为静态数据和动态数据,或者说是静态页面和动态页面。在 Backbone 中,静态数据和动态数据的模块分为2种: (1)Model、Collection 属于静态数据; (2)router 则属于动态数据; 由此可见,router 路由在 web 应用中的作用。 在Backbone官方给出的文档中,对 Router 有如下解释:

Backbone.Router 为客户端路由提供了许多方法,并能连接到指定的动作(actions)和事件(events)。

是的,Router能够控制 URL 的走向,并且,当在 URL 中使用#标签时生效。 所以,在 Backbone 中,#标签后的任意字符都会被 Router 接收并解释。

同时,在 Backbone 中,通过 hash 的方式(即#page)来使浏览器的 url 定位到当前页面,但是,要注意的是,如今大多数的浏览器可通过 history api 来操控url的改变,可直接使用/page来完成之前需要hash来完成的操作!

另外,在页面加载期间,当应用已经创建了所有的路由,需要调用 Backbone.history.start(),或 Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。即,打开 Backbone 的历史记录。

示例:

代码语言:javascript
复制
var AppRouter=Backbone.Router.extend({
		routes:{
				"*actions":"defaultRouter"
				//匹配url
		},
		defaultRouter:function(actions){
		      alert(actions); 
	}
});
var app_router=new AppRouter;
Backbone.history.start();//用start()初始化router

demo.html

// 让Router 匹配特定的 URL ,注意href的写法
<a href="#actions">调式</a>

但是,router 是如何匹配的呢,即router映射是如何传参的呢?我们将在下一篇中讲解。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档