Omi 新成員 omi-router 正式發佈

原文連接-https://github.com/AlloyTeam/omi/blob/master/tutorial

omi-router

omi-router是Omi框架專屬的router插件，文件尺寸輕量，使用簡便，功能強大。用於Omi製做Web單頁應用的首選解決方案。

單頁的好處也是很是明顯:

• 無刷新加載頁面內容
• 無刷新前進和後退頁面
• 路由中的某個連接的傳播和分享（別人看到的和你同樣的狀態）
• 轉場動畫（a標籤跳轉不只要白屏，並且沒有轉場動畫）
• 資源複用（單頁中的許多資源必定是能夠共用的，最典型的好比omi.js，若是不是單頁的話，你須要加載屢次）

好了，好處這麼多，看看怎麼安裝使用吧~~

安裝

CDN

能夠直接經過Unpkg.com下載或引用cdn: unpkg.com/omi-router/…

<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即可使用。

開始

先來看下HTML結構:

<div id="links">

</div>
<div id="view">

</div>複製代碼

看下javascript代碼:

import Omi from 'omi'
import OmiRouter from '../../index.js'

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 {

    install() {
        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: '/'
        })
    }

    render() {
        return  ` <ul> <li><a omi-router to="/" >Home</a></li> <li><a omi-router to="/about" >About</a></li> <li><a omi-router to="/user-list" >UserList</a></li> </ul> `
    }
}


Omi.render(new App(),"#links")複製代碼

這裏詳細說下 OmiRouter.init 傳遞的配置參數的意義:

參數名	意義	是否必須
routes	路由配置。其中每一項中的path表明匹配規則，component表明渲染的組件	必須
renderTo	組件渲染的容器	必須
defaultRoute	若是第一次打開頁面沒攜帶hash，默認使用的地址	必須

再看下UserList:

import Omi from 'omi';

class UserList extends Omi.Component {

    render() {
        return  ` <ul> <li><a omi-router to="/user/yanagao/category/js" >yanagao</a></li> <li><a omi-router to="/user/vorshen/category/html" >vorshen</a></li> <li><a omi-router to="/user/dntzhang/category/css" >dntzhang</a></li> </ul> `;
    }
}

Omi.tag('UserList',UserList)

export default  UserList複製代碼

動態匹配

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

注意: $route 會被掛載在$store下，$store會在根組件中注入，在組件樹中的任何組件均可以經過 this.$store.$route.params 訪問hash傳遞的數據。

接着上面例子

import Omi from 'omi'

class User extends Omi.Component {

    beforeRender(){
        let params =  this.$store.$route.params
        this.data.name = params.name
        this.data.category = params.category
        this.info = this.queryInfo(this.data.name)
        this.data.age = this.info.age
        this.data.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="back">back</button> <ul> <li>name:{{name}}</li> <li>age:{{age}}</li> <li>sex:{{sex}}</li> <li>category:{{category}}</li> </ul> </div> `
    }
}


Omi.tag('User',User)

export default  User複製代碼

上面使用了beforeRender進行store到data的轉換，beforeRender是生命週期的一部分。且看下面這張圖:

beforeRender

注意:除了在constructor中不能讀取到 this.$store, 在聲明週期的任何其餘函數中都能讀取到 this.$store，很是便捷。

地址

• 在線演示地址
• 源碼地址

相關

• Omi官網 omijs.org
• Omi的Github地址 github.com/AlloyTeam/o…
• 若是想體驗一下Omi框架，能夠訪問 Omi Playground
• 若是想使用Omi框架或者開發完善Omi框架，能夠訪問 Omi使用文檔
• 若是你想得到更佳的閱讀體驗，能夠訪問 Docs Website
• Omi相關的使用教程和blog，能夠訪問 Omi Tutorial
• 若是你懶得搭建項目腳手架，能夠試試 omi-cli
• 若是你有Omi相關的問題能夠 New issue
• 若是想更加方便的交流關於Omi的一切能夠加入QQ的Omi交流羣(256426170)