omi-router

omi-router是 Omi 专属的router插件，文件尺寸轻量，使用简便，功能强大。用于Omi制作Web单页应用的首选解决方案。

→ DEMO

单页的好处也是非常明显:

• 无刷新加载页面内容
• 无刷新前进和后退页面
• 路由中的某个链接的传播和分享（别人看到的和你一样的状态）
• 转场动画（a标签跳转不仅要白屏，而且没有转场动画）
• 资源复用（单页中的许多资源一定是可以共用的，最典型的比如omi.js，如果不是单页的话，你需要加载多次）

好了，好处这么多，看看怎么安装使用吧~~

安装

NPM

npm install omi-router

开始

//你可以在全局访问到 route
import 'omi-router'
import { define, WeElement, render } from 'omi'
import './about'
import './home'
import './user'
import './user-list'
define('my-app', class extends WeElement {
  static observe = true
  data = { tag: 'my-home' }
  install() {
    route('/', () => {
      this.data.tag = 'my-home'
    })
    route('/about', (evt) => {
      console.log(evt.query)
      this.data.tag = 'my-about'
    })
    route('/user-list', () => {
      this.data.tag = 'user-list'
    })
    route('/user/:name/category/:category', (evt) => {
      this.data.tag = 'my-user'
      this.data.params = evt.params
    })
    route('*', function () {
      console.log('not found')
    })
    route.before = (evt) => {
      console.log('before')
      //prevent route when return false
      //return false
    }
    route.after = (evt) => {
      console.log('after')
    }
  }
  onClick = () => {
    route.to('/user/vorshen/category/html')
  }
  render(props, data) {
    return (
      <div>
        <ul>
          <li><a href="#/" >Home</a></li>
          <li><a href="#/about" >About</a></li>
          <li><a href="#/user-list" >UserList</a></li>
          <li><a href="#/about?name=dntzhang&age=18" >About Dntzhang</a></li>
        </ul>
        <div id="view">
          <data.tag params={data.params} />
        </div>
        <div><button onClick={this.onClick}>Test route.to</button></div>
      </div>
    )
  }
})
render(<my-app />, "#container")

动态匹配

另一种携带查询参数方法

<li><a href="#/about?name=dntzhang&age=18" >About</a></li>

route('/about', (evt) => {
  //点击上面的标签会输出 { name: 'dntzhang', age : '18' } 
  console.log(evt.query)
})

地址

• 在线演示地址
• 源码地址

License

This content is released under the MIT License.