SPA的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。 其中avalon路由用到了两个单独独立出来的类库 mmRouter 和 mmHistory。
路由有什么作用呢？
路由其实可以理解成 网站上不同的网页地址， 如果不是SPA的网站， 浏览器的前进后退，链接到了一个新的页面，整个页面重新刷新； 但如果是SPA网站，因为整个页面是不需要全部刷新的，网站的页面也停留在当前页面，那么怎么解决浏览器的前进后退问题呢， 怎么解决需要定位到特定网页地址的问题呢，所以SPA就引入了路由系统。 下面我们看看路由是怎么实现的：
引入路由
用requriejs 引入avalon路由
mmRouter和mmHistory地址：https://github.com/RubyLouvre/mmRouter
用requirejs配置mmRouter和mmHistory在网站中的地址
require.config({//第一块，配置
baseUrl: '',
paths: {
avalon: ["js/avalon/avalon"],//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块
mmHistory: 'js/avalon/mmHistory',
mmRouter: 'js/avalon/mmRouter',
}
});avalon路由代码
'/sub1/index'为路由地址, 当用户在页面点击这个地址的时候，触发callback回调，每个路由可以单独定义一个callback方法。在这个种子工程中，我都调用了同一个callback方法，就比较适合目录动态生成，需要按需调用不同的页面的情况。 在这里执行了callback回调之后， console.log(this.path)输出了路径的地址
//requirejs引用mmRouter
require(['mmRouter'],function(mmRouter){
avalon.log("引入avalon");
var model = avalon.define({
$id: "root",
name: "tangolivesky"
})
//路由的导航回调
function callback() {
console.log(this.path);
}
/*avalon路由方法 '/sub1/index'为路由地址, 当用户在页面点击这个地址的时候，触发callback回调，
每个路由可以单独定义一个callback方法。在这个种子工程中，我都调用了同一个callback方法，就比较适合
目录动态生成，需要按需调用不同的页面的情况*/
avalon.router.get("/sub1/index", callback)
avalon.router.get("/sub2/index", callback)
avalon.history.start({
basepath: "/avalon"
})
avalon.scan()
});
html页面：
结构比较简单，我们就定义了两个a 标签，地址前面加上#!, 这个是avalon特有的写法，angularjs是#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>avalon工程</title>
<script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
<ul>
<li>
<a href="#!/sub1/index">导航1</a>
</li>
<li>
<a href="#!/sub2/index">导航2</a>
</li>
</ul>
</body>
</html>执行结果
当点击导航1，或者导航2，分别在浏览器 控制台中输出了/sub1/index和 /sub2/index
按需加载js和子页面html模板
一个项目都会由好多个子页面和js组成， 就单页面程序来讲， 你可以把js进行合并，然后按需加载部分子页面html. 也可以按需加载js和html . 我在这里用的是按需加载js, 再由js中的requirejs text 类库来加载html文件。
index.html增加子页面替换标签
在首页index.html中增加这段代码<div ms-include-src="content"></div>， avalon中ms-include-src是用来加载模板用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>avalon工程</title>
<script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
<ul>
<li>
<a href="#!/sub1/index">导航1</a>
</li>
<li>
<a href="#!/sub2/index">导航2</a>
</li>
</ul>
<div ms-include-src="content"></div>
</body>
</html>修改main.js中导航回调函数
//导航回调
function callback() {
var jspath = "modules"; //这里改成您自己的网站地址 ,这个是js路径的变量
var pagepath = ""; //这个是网页的变量
//这段代码的作用是按照路由path 得到需要加载的js路径
var paths = this.path.split("/");
for (var i = 0; i < paths.length; i++) {
if (paths[i] != "") {
jspath += "/" + paths[i];
pagepath += "_" + paths[i];
}
}
//console.log(jspath);
//console.log(pagepath);
require([jspath], function (page) {
//这段代码的作用是把pagepath变量 赋给root controller下面的content
avalon.vmodels.root.content = pagepath;
});
}修改modules/sub1 下面的index.js
同理修改 modules/sub2下面的index.js
sub1下面index.js
define(['avalon', 'text!./index.html',], function (avalon,_sub1_index) {
avalon.templateCache._sub1_index = _sub1_index
})
sub2下面index.js
define(['avalon', 'text!./index.html',], function (avalon,_sub2_index) {
avalon.templateCache._sub2_index = _sub2_index
})sub1下面index.html
<div>
第一个页面
</div>执行结果
分别点击导航1 和 导航2， 按需加载了sub1的index.js、index.html 和 sub2的index.js、index.html
例子我放在了github中 https://github.com/tangolivesky/avalonSPA_Sample
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。