<!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();
});
时间： 2024-10-08 12:38:10