【Amaple教程】1.启动路由

时间：2023-04-02 16:42:39 HTML

在写具体代码之前，首先需要启动单页面模式，进行简单的配置。在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的historyAPI实现的，和普通的url是一样的。//但在不支持该功能的浏览器中无法正常使用。并且需要后台服务器的配置支持，可以使用history:am.BROWSER来指定//以上是两种可选的url模式，也可以指定history:am.AUTO让框架自动选择模式，以及supporthtml5historyAPI在浏览器中自动使用该模式，//如果不支持，会自动回退使用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"},//路由定义该函数接收Router类的对象。使用这个对象，我们可以告诉框架一个url应该显示哪个模块路由：;//module和route函数都会返回router对象本身，所以可以使用链式调用//router.module函数来选择配置的模块节点，函数中没有传入任何参数，表示选择一个未命名的模块node,//我们在中定义了一个未命名的模块节点//你也可以为模块指定一个名称，像这样

,//这时候，你需要调用router.module("main")选择模块节点//router.route函数为选择的模块配置匹配路径和模块的映射，//当url相对路径为“/”时会加载index.html模块文件，当url相对路径为“/about”时，会加载about.html模块文件},//已经解释过的配置历史：am.HASH});简单配置后，接下来就可以编写index.html模块文件了，在src/module文件夹下添加一个index.html文件。继续下一节：【AmapleJS教程】2.模块也可以复习上一节：【AmapleJS教程】前言