diff --git a/packages/omi-router/README.md b/packages/omi-router/README.md new file mode 100755 index 000000000..b7bba4ca1 --- /dev/null +++ b/packages/omi-router/README.md @@ -0,0 +1,81 @@ +# omi-router + +## Install + +```js +npm install omi-router +``` + +## Usage + +```js +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 { + static observe = true + + data = { tag: 'my-home' } + install() { + + route('/', (info) => { + this.data.tag = 'my-home' + }) + + route('/about', (info) => { + this.data.tag = 'my-about' + }) + + route('/user-list', (info) => { + this.data.tag = 'user-list' + }) + + route('/user/:name/category/:category', (info) => { + this.data.tag = 'my-user' + }) + + route('*', function () { + console.log('not found') + }) + } + + render(props, data) { + return ( +
+ +
+ +
+
+ ) + } +}) + +render(, "#container") +``` + +## Match + +| Rule | Path | route.params | +|---------|------|--------| +| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` | +| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: js }` | + +Any component in the component tree can access data transmitted by hash through `route.params`. + + +## Links + +* [DEMO](https://tencent.github.io/omi/packages/omi-router/examples/simple/) +* [Source](https://github.com/Tencent/omi/tree/master/packages/omi-router/examples/simple) + +## License +This content is released under the [MIT](http://opensource.org/licenses/MIT) License.