omi-page

基于 page.js 的 Omi 路由。

→ demo

使用:

  1. import { render, tag, WeElement } from 'omi'
  2. import page from 'omi-page'
  3. @tag('my-app')
  4. class MyApp extends WeElement {
  5. installed() {
  6. page('/', this.index)
  7. page('/about', this.about)
  8. page('/contact', this.contact)
  9. page('/contact/:contactName', this.contact)
  10. page('*', this.notfound)
  11. page()
  12. }
  13. render() {
  14. return (
  15. <div>
  16. <ul>
  17. <li><a href="/">/</a></li>
  18. <li><a href="/about">/about</a></li>
  19. <li><a href="/contact">/contact</a></li>
  20. <li><a href="/contact/me">/contact/me</a></li>
  21. <li><a href="/contact/me?a=b">/contact/me?a=b</a></li>
  22. <li><a href="/not-found?foo=bar">/not-found</a></li>
  23. </ul>
  24. <p>
  25. {this.data.path}
  26. </p>
  27. </div>
  28. )
  29. }
  30. index = (ctx) => {
  31. this.data.path = ctx.path
  32. this.update()
  33. }
  34. about = (ctx) => {
  35. this.data.path = ctx.path
  36. this.update()
  37. }
  38. contact = (ctx) => {
  39. this.data.path = ctx.path
  40. this.update()
  41. }
  42. notfound = (ctx) => {
  43. this.data.path = ctx.path
  44. this.update()
  45. }
  46. }
  47. render(<my-app></my-app>, 'body')

如果你知道 express,page.js 完全受 express 启发。了解 express 你就肯定能够快速上手 omi-page。