omi-page
基于 page.js 的 Omi 路由。
使用:
import { render, tag, WeElement } from 'omi'
import page from 'omi-page'
@tag('my-app')
class MyApp extends WeElement {
installed() {
page('/', this.index)
page('/about', this.about)
page('/contact', this.contact)
page('/contact/:contactName', this.contact)
page('*', this.notfound)
page()
}
render() {
return (
<div>
<ul>
<li><a href="/">/</a></li>
<li><a href="/about">/about</a></li>
<li><a href="/contact">/contact</a></li>
<li><a href="/contact/me">/contact/me</a></li>
<li><a href="/contact/me?a=b">/contact/me?a=b</a></li>
<li><a href="/not-found?foo=bar">/not-found</a></li>
</ul>
<p>
{this.data.path}
</p>
</div>
)
}
index = (ctx) => {
this.data.path = ctx.path
this.update()
}
about = (ctx) => {
this.data.path = ctx.path
this.update()
}
contact = (ctx) => {
this.data.path = ctx.path
this.update()
}
notfound = (ctx) => {
this.data.path = ctx.path
this.update()
}
}
render(<my-app></my-app>, 'body')
如果你知道 express,page.js 完全受 express 启发。了解 express 你就肯定能够快速上手 omi-page。