起步
注意:
- 文档只针对0.6以上版本, 包括regularjs和regular-state两个包.
- 文档主要针对单页路由系统做解释,不再介绍Regular组件的使用方式,请参考Regular文档
安装
npm
npm install regular-state --save
npm install regularjs --save
注意: regular-state并没有依赖具体版本的Regular(使用的peerDependencies), 需要同时依赖
使用
npm
const restate = require('regular-state')
const routes = {
//略...
}
restate()
.state(routes) //完成路由节点注册
.start({ html5: true }) // 启动路由
直接引入
<!-- 这个文件在regular仓库的dist目录 -->
<script src='regular.js' /></script>
简单范例
代码如下(简单起见我们用ES6的模板字符串管理template)
var App = Regular.extend({
template:
`<div>
<h2>主页</h2>
<div>
<a href='#/app/chat'>Go Chat</a>|
<a href='#/app/blog'>Go Blog</a>
</div>
<div r-view ></div>
</div>
`
})
var Blog = Regular.extend({
template: `
<div>
Blog Page
</div>
`
})
var Chat = Regular.extend({
template: `
<div>
<h2>聊天室</h2>
</div>
`
});
var manager = restate()
//注册路由
.state({
'app': {
view: App
},
'app.blog':{
view: Blog
},
'app.chat':{
view: Chat
}
}).start({ // 启动路由
view: document.getElementById('app') //顶层容器节点
});
简要说明