Omi 入坑指南 第四場 Router

傻夢獸發表於2019-03-03

在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>
    )
  }
})

複製程式碼

這樣寫後我們的瀏覽器會給我們一個很大的驚喜

image.png

看來install並不是我想象中那樣是create的生命週期,所以我們的程式碼要修改一下。

...
data = {
  tag:`app-intro`
}
...
複製程式碼

還有我們這裡app-intro是我們web components裡面定義的 define 標籤。

回到我們的瀏覽器中可以看到

image.png

下面我們看看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>
    )
  }
})
複製程式碼

我們回到瀏覽器

image.png

目測可以吧，作者再進行改造一次

//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>
    )
  }
})

複製程式碼

回到瀏覽器中

image.png
image.png
image.png
image.png

預期的效果都能看到，不過用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 中直接處理掉這個資料

相關文章