Omi 入坑指南 第四場 Router
在React的世界裡面有React-Router,Vue的世界裡有Vue-Router,當然在Webpack這個打包工具裡面如果沒有一個Router擴充套件包的話，那是不可能的，所以進入的Omi-Router的學習
omi-router 安裝
npm install omi-router //或者 yarn add omi-router 複製程式碼
我們只需要在我們的元件中加入入口檔案 omi-router 可能能擁有一個全域性的router變數。我測試後看看是不是。
我們進入使用的是 Omi init 的模板做實驗
進入我們的主元件 src/elements/index.js 中修改成以下程式碼
import 'omi-router'; //引入router 獲取全域性 route
import { define, WeElement } from 'omi'
import '../app-intro'
define('my-app', class extends WeElement {
//我們的 路由配置檔案寫在這裡
data = {
tag: ''
}
install() {
//路由配置
route('/', () => {
this.data.tag = 'app-intro'
})
}
render(props, data, store) {
return (
<div class="app">
<data.tag params={{}} /> {/* 我還是第一次知道有這樣額寫法在 jsx 中233 */}
</div>
)
}
})
複製程式碼
這樣寫後我們的瀏覽器會給我們一個很大的驚喜
看來 install 並不是我想象中那樣是create的生命週期,所以我們的程式碼要修改一下。
...
data = {
tag:'app-intro'
}
...
複製程式碼
還有我們這裡app-intro是我們web components裡面定義的 define 標籤。
回到我們的瀏覽器中可以看到
下面我們看看Omi-router 能否支援 巢狀寫法，這個功能可以說是React-Router 4.0 最強大的功能，很多國內的高管都還喜歡用Router 3.0 的那套 ，也就是 Vue-router 的那套管理機制，那套管理機制是上古遺留機制，你的系統真的做大了，router頁面元件巢狀複雜的時候，這套上古機制就會發現問題了，自己慢慢體會吧。
我們進入 app-intro 中進行修改
import { define, WeElement } from 'omi'
import route from 'omi-router';
import '../hello';
define('app-intro', class extends WeElement {
data = {
tag:'hello-element'
};
css() {
}
install() {
route('/aoo', () => {
this.data.tag = 'hello-element'
})
}
render(props, data) {
console.log(data);
return (
<p class="app-intro">
Google
<data.tag params={{}} />
</p>
)
}
})
複製程式碼
我們回到瀏覽器
目測可以吧，作者再進行改造一次
//src/app/index.js
import 'omi-router'; //引入router 獲取全域性 route
import { define, WeElement } from 'omi'
import '../app-intro';
import '../hello';
define('my-app', class extends WeElement {
//我們的 路由配置檔案寫在這裡
static observe = true
data = {
tag: 'app-intro'
}
install() {
//路由配置
route('/', () => {
this.data.tag = 'app-intro'
})
route('/name', () => {
this.data.tag = 'hello-element'
})
}
render(props, data, store) {
return (
<div class="app">
<data.tag params={{}} /> {/* 我還是第一次知道有這樣額寫法在 jsx 中233 */}
</div>
)
}
})
複製程式碼
//app-intro
import { define, WeElement } from 'omi'
import route from 'omi-router';
import '../hello';
import '../hello/null';
define('app-intro', class extends WeElement {
static observe = true
data = {
tag:null
};
css() {
}
install() {
route('/aoo', () => {
this.data.tag = 'hello-element'
})
route('/aop', () => {
this.data.tag = 'null-element'
})
}
render(props, data) {
console.log(data);
return (
<p class="app-intro">
Google
{data.tag !== null && <data.tag params={{}} />}
</p>
)
}
})
複製程式碼
回到瀏覽器中
預期的效果都能看到，不過用omi的同學記得一定要 static observe = true 這個設定一下
可以看出 Omi 也是支援 路由在複雜情況下巢狀的寫法。給100個贊。 在Omi中Route 的api 很簡單 就一個引數，把很多東西都去掉了，因為我們大部分時候就只需要在url中獲取兩個東西 query 和 params 在作者的官網中。
在Omi中我們只要知道兩個東西就好了 一個 route.query 和 一個 route.params
不需要像React 中 我們需要引入 query-string 去進行解析 hosiery.location.search ，
也不用像Vue裡,沒有智慧提示的而忘記單詞的尷尬操作，像作者英語不好的，沒有智慧提示還真的會死人。
route('/about', (evt) => {
//點選上面的標籤會輸出 { name: 'dntzhang', age : '18' }
console.log(evt.query)
})
複製程式碼
在Omi-Router 中 你要處理 路由操作等資料時，和Vue，React 都不一樣，它是在你寫Route('',()=>{})中就要可以要你想要的引數等資料先儲存到 你自己的 data 或者 prop 或者 store ，然後到 inserted 這個生命週期函式中進行 render 前處理，不過你也可以在Route 中直接處理掉這個資料