当前位置: 首页 > Web前端 > HTML

【Amaple教程】六、路由配置

时间:2023-04-02 19:36:04 HTML

第一节《启动路由》,为了让单页应用能够顺利运行,我们提前介绍了简单的路由配置方法。我们了解到路由配置的目的是指定在不同的url下对应的模块节点(也叫模块容器)中显示哪个模块的内容。它还具有更高级的用法,如配置匹配路由通配符、重定向等。配置静态匹配路由路由路径是一个特定的路径,如/、/about,则它们属于静态路由。这里我们尝试配置一个复杂的静态匹配路由。一般情况下,如果一个url的相对路径中有两级目录,那么模块结构中就有相应的嵌套层次,如://如果模块已知Anunnamednestedmodulenodehasbeendefinedin/index.htmlandmodule/about.htmlam.startRouter({routes:function(router){//当顶层路由路径为“/”时表示根目录,顶层的路由路径模块一般需要以”/”开头表示二级目录如果为空,则相对路径“/”匹配这个空目录。//配置空目录时,也可以这样设置:childRouter.module().defaultRoute("module/index/default")childRouter.module().route("","module/index/default").route("描述","模块/索引/描述");}).route("/about","module/about",function(childRouter){//配置路由路径时可以传入路径数组,即访问"/about/amaplejs"或"/about/amaple"将被映射到"module/about/amaplejs"modulechildRouter.module().route(["amaplejs","amaple"],"module/about/amaplejs").route("jquery","module/关于/jquery");});},//...});匹配路由通配符在实际项目中,我们往往需要多个甚至所有的路由路径来匹配同一个模块,比如一个文章模块,不同id的文章都会匹配这个模块,比如一个文章的header和footer模块页面始终保持不变。显然,在配置路由的时候不可能用一个数组来列出所有的路由路径。此时,我们需要使用匹配路由通配符来解决这个问题:("/article/:id","module/article");//如"/article/123","/article/456","/article/789"等都会匹配module/article.html模块},//...});当url为/article/123时,文章模块的am.Module对象会在param对象中创建一个id参数,可以通过id的参数值获取相应的文章内容进行显示:newam.Module({mounted:function(http){var_this=this;//此时this.param.id的值为“123”,即:id通配符匹配的字符串//使用http预定义插件请求数据内容;});}});匹配路由通配符也支持多级目录同时设置,会在param对象中创建多个对应的属性。//这是在模块对象的param中创建date和id两个属性匹配路由通配符还允许您限制通过正则表达式匹配的内容。//"/article/:id(\\d+)"表示id通配符只匹配一个或多个数字//比如可以匹配"/article/123",不能匹配"/article/a123"//正则表达式中使用“\”转义时,应成对出现如果url从/article/123跳转到/article/456时,article模块不会被替换,但是param.id的值会更新为456,然后article模块的paramUpdated生命周期函数叫。重定向您可以通过router.redirect函数从一个路由重定向到另一个路由。重定向的起始目录取决于当前匹配的路由目录:/","/index");//重定向的优先级高于匹配模块,所以router.redirect函数可以放在route函数之前或者后续调用会优先使用重定向路径router.module().route("/index","module/index",function(childRouter){//重定向的匹配路径和跳转路径也可以设置通配符childRouter.redirect("introduce/:title","describe/:title");//第二层的重定向起始目录是"/index/"之后的路径//比如"introduceof"/index/introduce/i_am_a_title"会匹配到/i_am_a_title"部分通过在此级别重定向并重定向到“describe/i_am_a_title”;});},//...});强制重新渲染一个模块我们了解到,有时候在更新模块的时候,有些模块不会被替换掉,这些模块也不会被卸载重新渲染渲染,但是有时候你可能希望它们回到初始化状态,那么router.forcedRender函数可以提供帮助,它可以强制一个不需要卸载的模块卸载并重新渲染:am.startRouter({routes:function(router){//对于“文章”模块节点配置时直接调用forcedRender函数,模块节点中渲染的模块将被强制重新渲染router.module("article").forcedRender().route("/article/:id","module/文章”);},//...});404错误路径设置在加载一个或多个模块时,如果没有找到任何模块文件,将触发404错误路径的模块匹配,配置404错误路径如下:am.startRouter({routes:function(router){//调用router.error404函数设置404路由,该函数只能在最外层路由对象上调用//错误路由建议以"/"开头router.error404("/404");//配置404路由的渲染模块router.module("article").route("/404","module/404");//...},//...});恭喜,你已经学习到最后一节了,下面我们在实际项目中练习使用吧。回顾上一节:【AmapleJS教程】五、插件