JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 196
  • Score
    100M100P100Q90889F
  • License MIT

Router for Omi

Package Exports

  • omi-router
  • omi-router/src/index.esm.js
  • omi-router/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (omi-router) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

English | 简体中文

omi-router

omi-router is a router plugin of Omi, and it is lightweight, easy and powerful to use. It is a solution to build Omi's SPA(Single Page Application).

→ DEMO

The advantage of SPA is very clear.

  • No refresh to load a content
  • No refresh to previous/forward page
  • Shareable link (Other can see the same page as you see)
  • No blank page and transmission animation
  • Reusable resource (If multi-page, same resource shold be loaded multi times)

Yes, there are many advantages. Let's do it.

Install

NPM

npm install omi-router

Usage

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")

Match

Rule Path route.params
/user/:name /user/dntzhang { name: 'dntzhang' }
/user/:name/category/:category /user/dntzhang/category/js { name: 'dntzhang', category: 'js' }

Note: If hash is empty, it will be automatically recognized as / 。

With Query Parameter

<li><a href="#/about?name=dntzhang&age=18" >About</a></li>
route('/about', (evt) => {
  //output { name: 'dntzhang', age : '18' } when click the tag above
  console.log(evt.query)
})

With 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.