mmRouter
mmRouter copied to clipboard
Published
20 hours ago •
RubyLouvre
RubyLouvre
mmRouter例子
<!DOCTYPE html>
<html>
<head>
<title>路由器的相关测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js">
</script>
<script>
require(["ready!", "mmRouter"], function() {
if (typeof console === "undefine") {
avalon.log = function(str) {
var div = document.createElement("div")
div.innerHTML = str
document.body.appendChild(div)
}
}
avalon.router.get("/", {
template: "<div>首页</div>",
callback: function() {
avalon.log("首页加载完毕")
}
})
avalon.router.get("/aaa", {
template: "<h1>这是第1个模板</h1>",
callback: function(a) {
avalon.log("aaa加载完毕")
}
})
avalon.router.get("/bbb/:bbb", {
templateUrl: function(a) {
return "template" + a + ".html"
}
})
avalon.router.get("/ccc", {
templateUrl: "template1.html",
})
avalon.history.start({basepath: "/avalon/"})
avalon.define("test", function(vm) {
vm.hash = function(a, e) {
location.hash = a
e.preventDefault()
}
})
avalon.scan()
})
</script>
</head>
<body>
<div ms-controller="test">
<div ms-view></div>
<ul>
<li><a href="#!/aaa">1111</a></li>
<li><a href="#!/bbb/2">2222</a></li>
<li><a href="#!/bbb/3">3333</a></li>
<li><a href="#!/ccc">4444</a></li>
</ul>
<table class="table-doc">
<tr>
<th>名字</th><th width="80">默认值</th><th>说明</th>
</tr>
<tr>
<td colspan="3" align="center">配置参数</td>
</tr>
<tr>
<td>view</td><td>""</td> <td>容器的名字, ms-view="name"中的name</td>
</tr>
<tr>
<td>element</td><td> null </td> <td>容器元素,即ms-view所定义的元素节点</td>
</tr>
<tr>
<td>template</td> <td> null </td><td>字符串或函数，如果是函数会将入路由的参数与将路由对象作为this,
最后返回容器要添加的HTML模板</td>
</tr>
<tr>
<td>templateUrl</td> <td>null</td><td>字符串或函数，如果是函数会将入路由的参数与将路由对象作为this，
最后将返回一个URL地址，框架通过它得到template。template会缓存到路由对象上</td>
</tr>
<tr>
<td>templates</td> <td>{}</td><td>如果存在templateUrl，它会通过ajax请求加载对应的模块，缓存在这里</td>
</tr>
<tr>
<td>regexp</td> <td></td> <td>路由规则对应的正则</td>
</tr>
<tr>
<td>path</td> <td></td> <td>地址中被配匹的部分</td>
</tr>
<tr>
<td>args</td> <td>[]</td><td>抽取路由规则中的参数名对应的实际值放在这里</td>
</tr>
<tr>
<td>params</td><td>{}</td> <td>将路由规则中的参数名与对应的实际值 以键值对形式 构成一个对象</td>
</tr>
<tr>
<td>callback(params)</td> <td></td><td> 当模板插入后，执行的回调函数，参数为args，值为路由对象</td>
</tr>
<tr>
<td>query</td> <td>{}</td><td> 地址栏上的query组成的对象</td>
</tr>
</table>
</div>
</body>
</html>
template1.html
<div>这是模板</div><div>这是模板</div><div>这是模板</div>
template2.html
<div style="color:green;font-size: 26px">这是第2个模板</div>
template3.html
<div style="color:pink;font-size: 26px">这是第3个模板</div>
