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

omi-router

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

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

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

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

安装

CDN

可以直接通过Unpkg.com下载或引用cdn: https://unpkg.com/omi-router/dist/omi-router.js

<script src="https://unpkg.com/omi/dist/omi.js"></script>
<script src="https://unpkg.com/omi-router/dist/omi-router.js"></script>

NPM

npm install omi-router

import Omi from 'omi'
import OmiRouter from 'omi-router'

如果使用全局的 script 标签，则无须如此import便可使用。

开始

import Omi from 'omi'
import OmiRouter,{ Link } from 'omi-router'

import Home from './home.js'
import About from './about.js'
import User from './user.js'
import UserList from './user-list.js'

class App extends Omi.Component {
    installed() {
        OmiRouter.init({
            routes: [
                {path: '/', component: Home},
                {path: '/about', component: About},
                {path: '/user-list', component: UserList},
                {path: '/user/:name/category/:category', component: User}
            ],
            renderTo: "#view",
            defaultRoute: '/',
            root: this
        })
    }

    render() {
        return  <div>
                <ul>
                    <li><Link to="/" >Home</Link></li>
                    <li><Link to="/about" >About</Link></li>
                    <li><Link to="/user-list" >UserList</Link></li>
                </ul>
                <div id="view"> </div>
            </div>
    }
}

Omi.render(<App />,"#container")

这里详细说下 OmiRouter.init 传递的配置参数的意义:

参数名	意义	是否必须
routes	路由配置。其中每一项中的path代表匹配规则，component代表渲染的组件	必须
renderTo	组件渲染的容器	必须
defaultRoute	如果第一次打开页面没携带hash，默认使用的地址	必须

再看下UserList:

import Omi from 'omi';
import { Link } from 'omi-router'

class UserList extends Omi.Component {

    render() {
        return  <ul>
                <li><Link to="/user/yanagao/category/js" >yanagao</Link></li>
                <li><Link to="/user/vorshen/category/html" >vorshen</Link></li>
                <li><Link to="/user/dntzhang/category/css" >dntzhang</Link></li>
            </ul>
    }
}

export default  UserList

上面使用了install进行$route到data的转换，install是生命周期的一部分。且看下面这张图:

beforeRender

注意:除了在constructor中不能读取到 this.$route, 在声明周期的任何其他函数中都能读取到 this.$route，非常便捷。

动态匹配

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

注意: $route 会被挂载在组件实例下，也就是 this ，在组件树中的任何组件都可以通过 this.$route.params 访问hash传递的数据。

接着上面例子

import Omi from 'omi'

class User extends Omi.Component {

    install(){
        let params =  this.$route.params
        this.name = params.name
        this.category = params.category
        this.info = this.queryInfo(this.name)
        this.age = this.info.age
        this.sex = this.info.sex
    }

    queryInfo(name) {
        this.mockData = {
            'yanagao': {age: 18, sex: 'female'},
            'vorshen': {age: 20, sex: 'male'},
            'dntzhang': {age: 22, sex: 'male'}
        }
        return this.mockData[name]
    }

    back(){
        history.back()
    }

    render() {
        return  <div >
                    <button onclick={this.back.bind(this)}>back</button>
                    <ul>
                        <li>name:{this.name}</li>
                        <li>age:{this.age}</li>
                        <li>sex:{this.sex}</li>
                        <li>category:{this.category}</li>
                    </ul>
                </div>

    }
}


export default  User

renderTo到不同view

OmiRouter.init({
    routes: [
        {path: '/', component: Home},
        {path: '/about', component: About},
        {path: '/user-list', component: UserList},
        {path: '/user/:name/category/:category', component: User, renderTo: "#otherView"}
    ],
    renderTo: "#view",
    defaultRoute: '/',
    root: this
})

如果你需要某个路由规则render到其他的view里，可以在routes但单独的项里添加renderTo，它的优先级会更高。

地址

License

This content is released under the MIT License.