omi-router

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

單頁的好處也是非常明顯:

• 無重新整理載入頁面內容
• 無重新整理前進和後退頁面
• 路由中的某個連結的傳播和分享（別人看到的和你一樣的狀態）
• 轉場動畫（a標籤跳轉不僅要白屏，而且沒有轉場動畫）
• 資源複用（單頁中的許多資源一定是可以共用的，最典型的比如omi.js，如果不是單頁的話，你需要載入多次）

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

安裝

CDN

<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 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 {
    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  `
        <div>
            <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>
            <div id="view"> </div>
        </div>
        `
    }
}

Omi.render(new App(),"#__omi")
 

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

再看下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 會被掛載在$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是生命週期的一部分。且看下面這張圖:

注意:除了在constructor中不能讀取到 this.$store, 在宣告週期的任何其他函式中都能讀取到 this.$store，非常便捷。

地址

相關

• 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文件
• 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
• Omi相關的使用教程和blog，可以訪問 Omi Tutorial
• 如果你懶得搭建專案腳手架，可以試試 omi-cli
• 如果你有Omi相關的問題可以 New issue
• 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)