<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>账户中心</title> <link rel="stylesheet" href="css/user.css"> <script src="js/lib/require.js" type="text/javascript" data-main="js/page/user"></script> </head> <body ms-controller="user" class="ms-controller"> <script type="text/javascript"> //这里给后端提供数据接口 var conf = { username: {"id": "11", "name": "77"} } </script> <header> <span>{{username.name}}你好，欢迎来到账户中心</span> </header> <nav> <ul> <li><a href="#!/index">我的首页</a></li> <li><a href="#!/detail">账户详情</a></li> <li><a href="#!/recharge">我要充值</a></li> </ul> </nav> <article ms-include-src="pageUrl"> <!--这里使用ms-include-src接口，它会引入pageUrl属性所对应的文件--> </article> </body> </html>
require.config({
baseUrl: ‘js/lib/‘, //相对于index.html页面文件的地址
paths:{ //这里配置的地址，都是相对于上方的baseUrl的
avalon: ‘avalon‘,
domReady:‘domReady‘,
mmHistory: ‘mmHistory‘,
mmRouter: ‘mmRouter‘,
css: ‘css‘ //加上css.js
},
shim:{
avalon: { exports: "avalon" },
mmHistory:{ deps: [‘avalon‘]},
mmRouter:{ deps: [‘avalon‘]},
}
});
require([‘mmHistory‘,‘mmRouter‘,"domReady!"], function() {
var vm = avalon.define({
$id: "user",
username:conf.username,
pageUrl:"mine.html" //默认为mine.html
});
function callback() {
if(this.path==="/index"){
vm.pageUrl="mine.html"; //如果url后缀变成"#!/index"，则pageUrl为“mine.html”
}else {
var path_tail = this.path.replace(/\//, ""); //去掉this.path值的第一个斜杠
vm.pageUrl = path_tail + ".html"; //动态修改pageUrl属性值
}
}
avalon.router.get("/*path", callback); //劫持url hash并触发回调
avalon.history.start(); //历史记录堆栈管理
avalon.scan();
});
原文：http://www.cnblogs.com/yexiangwang/p/5042098.html