JSPM

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

Router for Omi.

Package Exports

  • omi-router

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

//You can visit route in the global context.
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', () => {
      this.data.tag = 'my-about'
    })

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

    route('/user/:name/category/:category', (params) => {
      this.data.tag = 'my-user'
      this.data.params = 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>
        </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 }

With Query Parameter

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

License

This content is released under the MIT License.