【Amaple教程】1. 启动路由

zhangwang 发布于2019-08-30 13:52 / 2108人阅读

摘要：开始编写具体的代码前，首先需启动单页模式并进行简单配置。我们在开发包的文件中调用函数并传入一个对象进行启动路由并配置单页应用。继续学习下一节教程模块也可回顾上一节教程前言

开始编写具体的代码前，首先需启动单页模式并进行简单配置。在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文件）内定义一个模块节点，来告诉框架请求的模块内容放到页面的哪个位置

[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函数选定配置的模块节点，函数内没有传入任何参数表示选定一个不具名的模块节点，
          // 我们在内已定义了一个不具名的模块节点
          
          // 你也可以为模块指定名称，像这样，
          // 此时需这样调用router.module ( "main" )来选定模块节点。
          
          // router.route函数为选定模块配置匹配路径与模块的映射，
          // 当url相对路径为“/”时将加载index.html模块文件，当url相对路径为“/about”时将加载about.html模块文件
     },

     // 已讲解过的配置
     history : am.HASH
} );

简单的配置后，接下来就可以来编写这个index.html模块文件了，在src/module文件夹内添加一个index.html文件。

继续学习下一节：【AmapleJS教程】2. 模块
也可回顾上一节：【AmapleJS教程】前言

云服务器 GPU云服务器 Amaple linux启动1 无线路由器设置教程 win8.1电话激活教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115597.html

Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

loonggg 2019-08-30 13:52 评论0 收藏0
Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

imingyu 2019-08-01 18:27 评论0 收藏0
Amaple.js框架详细介绍

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...

chemzqm 2019-08-22 14:00 评论0 收藏0