omi-router

Router for Omi

Usage no npm install needed!

<script type="module">
  import omiRouter from 'https://cdn.skypack.dev/omi-router';
</script>

README

English | 简体中文

omi-router

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

→ DEMO

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

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

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

安装

NPM

npm install omi-router

开始

import { route } from 'omi-router'
import { define, WeElement, render } from 'omi'
import './about'
import './home'
import './user'
import './user-list'

define('my-app', class extends WeElement {

  data = { tag: 'my-home' }

  install() {

    route('/', () => {
      this.data.tag = 'my-home'
      this.update()
    })

    route('/about', (evt) => {
      console.log(evt.query)
      this.data.tag = 'my-about'
      this.update()
    })

    route('/user-list', () => {
      this.data.tag = 'user-list'
      this.update()
    })

    route('/user/:name/category/:category', (evt) => {
      this.data.tag = 'my-user'
      this.data.params = evt.params
      this.update()
    })

    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() {
    const data = this.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")

动态匹配

模式 匹配路径 route.params
/user/:name /user/dntzhang { name: 'dntzhang' }
/user/:name/category/:category /user/dntzhang/category/js { name: 'dntzhang', category: 'js' }

注意： 如果 hash 为空，会自动被识别为 /。

另一种携带查询参数方法

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

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

携带 JSON Data

route.to('/about',(evt) => {
  //{ a: 1 }
  console.log(evt.data)
})
route.to('/about', { a: 1 })

地址

License

This content is released under the MIT License.