【Amaple教程】1. 启动路由

2023年7月15日 214次阅读 来源: JOU_amjs

最先编写详细的代码前，起首需启动单页形式并举行简朴设置。在src/index.html中引入amaple.js框架文件后我们就能够运用am这个全局对象。我们在开发包的src/config.js文件中挪用am.startRouter函数并传入一个Object对象举行启动路由并设置单页运用。起首我们来设置url作风：

am.startRouter ( {

     // amaplejs中存在两种url形式，离别为
     // url中带“#”的hash形式，一切浏览器都支撑此形式。可运用history: am.HASH指定
     // url中不带“#”的restful形式，此形式运用html5 history API完成，与一般url雷同，
     // 但在不支撑此特征的浏览器中不能一般运用，且需背景服务端的设置支撑，可运用history: am.BROWSER指定
     // 以上为两种可选的url形式,你也能够指定history : am.AUTO来让框架自动挑选形式，在支撑html5 history API的浏览器下自动运用此形式，
     // 不支撑的情况下将自动回退运用hash形式
     history : am.HASH
} );

设置一个简朴的婚配路由

正如我们所知到的，差别url将会显现差别的页面，在这里我们也需通知框架一个url应当显现哪几个模块，实在这也是很简朴的，详细分为两步：

  • [1].在进口html文件（即src/index.html文件）内定义一个模块节点，来通知框架要求的模块内容放到页面的哪一个位置
<body>
     <!-- 在<body>内增加一个<div>并给它增加:module属性，如许就指定了一个不签字的模块节点 -->
     <!-- 你能够将模块节点理解为模块衬着输出的容器，:module属性为空值示意不签字的模块节点，且任何标签都能够作为模块节点 -->
     <div :module></div>
</body>
  • [2].在am.startRouter函数中为模块设置相干参数，在函数参数内离别增加baseURL、module和routes参数，以下：
am.startRouter( {
    baseURL : {
          // 为模块文件设置base途径，一切的模块文件要求途径都将基于“/module”目次，不设置时默许“/”
          module: "/module"
     },

     // 模块文件后缀，实在默许的模块文件后缀就是“.html”，你也能够为它设置其他后缀
     module : {
          suffix: ".html"
     },

     // routes定义的function吸收一个Router类的对象，运用此对象我们就能够通知框架一个url应当显现哪几个模块
     routes : function ( router ) {

          router.module ().route ( "/", "index" ).route ( "/about", "about" );
          // 在module和route函数内都邑返回router对象自身，所以可运用链式挪用
          // router.module函数选定设置的模块节点，函数内没有传入任何参数示意选定一个不签字的模块节点，
          // 我们在<body>内已定义了一个不签字的模块节点
          
          // 你也能够为模块指定称号，像如许<div :module="main"></div>，
          // 此时需如许挪用router.module ( "main" )来选定模块节点。
          
          // router.route函数为选定模块设置婚配途径与模块的映照，
          // 当url相对途径为“/”时将加载index.html模块文件，当url相对途径为“/about”时将加载about.html模块文件
     },

     // 已解说过的设置
     history : am.HASH
} );

简朴的设置后，接下来就能够来编写这个
index.html模块文件了，在
src/module文件夹内增加一个
index.html文件。

继承进修下一节：【AmapleJS教程】2. 模块
也可回忆上一节：【AmapleJS教程】媒介

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