【Amaple教程】6. 路由设置

第1节《启动路由》 章节中为了能让单页运用顺遂跑起来,我们提早引见了简朴的路由设置要领。我们已相识路由设置的目标是指定差别的url下对应的 模块节点(也叫做模块容器)内应当显现哪一个模块的内容,它还有更多高等的用法如婚配路由通配符的设置、重定向等。

设置静态婚配路由

一个路由途径是详细的途径如//about,那末它们就属于静态路由。这里我们试着设置一个复杂点的静态婚配路由,在平常情况下,如果一个url的相对途径中存在两级目次,那末在模块构造中也有响应嵌套层数,如:

// 如果已知module/index.html、module/about.html中都已定义了一个不签字的嵌套模块节点
am.startRouter ( {
    routes: function ( router ) {

        // 顶层路由途径为"/"时示意根目次,顶层模块的路由途径平常需以“/”开首
        router.module ().route ( "/", "module/index", function ( childRouter ) {

            // 子路由中目次名设置为""时示意二级目次为空,此时相对途径为“/”将会婚配到此空目次。
            // 设置空目次时,你也能够如许设置:childRouter.module ().defaultRoute ( "module/index/default" )
            childRouter.module ().route ( "", "module/index/default" ).route ( "describe", "module/index/describe" );
        } )
        .route ( "/about", "module/about", function ( childRouter ) {

            // 设置路由途径时可传入一个途径数组,如许示意接见“/about/amaplejs”或“/about/amaple”都将映射到“module/about/amaplejs”模块
            childRouter.module ().route ( [ "amaplejs", "amaple" ], "module/about/amaplejs" ).route ( "jquery", "module/about/jquery" );
        } );
    },
    // ...
} );

婚配路由通配符

现实项目中我们常常须要多个以至一切的路由途径都婚配同一个模块,如一个文章模块,差别id的文章都将婚配此模块,又比如一个页面的 header footer 模块老是坚持原样。明显,这不能够在设置路由时运用数组列出一切的路由途径,此时我们就须要运用婚配路由通配符来处理这个题目:

am.startRouter ( {
    routes: function ( router ) {

        // 婚配路由通配符以“:”开首
        router.module ( "article" ).route ( "/article/:id", "module/article" );
        // 如许如“/article/123”、“/article/456”、“/article/789”等都将会婚配module/article.html模块
    },
    // ...
} );

当url为/article/123时,文章模块的am.Module对象中将在param对象中建立id参数,你能够经由过程id的参数值猎取对应的文章内容举行显现:

new am.Module ( {
    mounted : function ( http ) {
        var _this = this;

        // 此时this.param.id的值为"123",即:id通配符所婚配的字符串
        // 运用http预定义插件要求数据
        http.get ( "article?id=" + this.param.id, "json" ).done ( function ( res ) {
            _this.state.title = res.title;
            _this.state.content = res.content;
        } );
    }
} );

婚配路由通配符也支撑在多级目次同时设置,这是会在param对象中建立多个对应的属性。

// 这是会在模块对象的param中建立date和id两个属性
router.module ( "article" ).route ( "/article/:date/:id", "module/article" );

婚配路由通配符还许可你经由过程正则表达式限定婚配的内容。

// “/article/:id(\\d+)”示意id通配符只婚配一名或多位的数字
// 如它可婚配“/article/123”,但不能婚配“/article/a123”
// 正则表达式中运用“\”转义时应当成双涌现
router.module ( "article" ).route ( "/article/:id(\\d+)", "module/article" );

如果url从
/article/123跳转到
/article/456时文章模块不会被替代,但param.id的值被更新为
456,这时候文章模块的
paramUpdated
性命周期函数 就会被挪用。

重定向

经由过程router.redirect函数你能够从一个途径重定向到另一个途径,重定向的肇端目次取决于当前正在婚配的路由目次:

am.startRouter ( {
    routes: function ( router ) {

        // 在顶层目次中将“/”重定向到“/index”
        router.redirect ( "/", "/index" );
        // 重定向的优先级高于婚配模块,所以router.redirect函数可在route函数前面或背面挪用,都邑优先重定向途径

        router.module ().route ( "/index", "module/index", function ( childRouter ) {

            // 重定向的婚配途径与跳转途径也能够设置通配符
            childRouter.redirect ( "introduce/:title", "describe/:title" );
            // 第二层的重定向肇端目次为“/index/”以后的途径
            // 如“/index/introduce/i_am_a_title”的“introduce/i_am_a_title”部份将会被这层的重定向婚配,并重定向到“describe/i_am_a_title”

            childRouter.module ().route ( "", "module/index/default" ).route ( "describe/:title", "module/index/describe" );
        } );
    },
    // ...
} );

强迫从新衬着一个模块

我们已相识偶然候更新模块时部份模块不会被替代,这些模块不会被卸载从新衬着,但你偶然能够愿望它们回到初始化状况,这时候router.forcedRender函数就能够帮上忙了,它能强迫让一个原本不需卸载的模块卸载并从新衬着:

am.startRouter ( {
    routes: function ( router ) {

        // 为“article”模块节点设置时直接挪用forcedRender函数,该模块节点内衬着的模块都邑强迫从新衬着
        router.module ( "article" ).forcedRender ().route ( "/article/:id", "module/article" );
    },
    // ...
} );

404毛病途径设置

当加载一个或多个模块时,恣意一个模块文件未找到时将会触发 404毛病 途径的模块婚配,设置 404毛病 途径以下:

am.startRouter ( {
    routes: function ( router ) {

        // 挪用router.error404函数设置404途径,此函数只能在最外层路由对象挪用
        // 毛病途径发起以“/”最先
        router.error404 ( "/404" );


        // 为404途径设置衬着模块
        router.module ( "article" ).route ( "/404", "module/404" );
        // ...
    },
    // ...
} );

祝贺你,已学到末了一节了,快去现实项目中演习运用吧

回忆上一节:【AmapleJS教程】5. 插件

    原文作者:JOU_amjs
    原文地址: https://segmentfault.com/a/1190000012966646
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞