diff --git a/packages/omi-router/examples/spa/package.json b/packages/omi-router/examples/spa/package.json
index 2cf91bf82..9db441a46 100644
--- a/packages/omi-router/examples/spa/package.json
+++ b/packages/omi-router/examples/spa/package.json
@@ -52,7 +52,7 @@
"scripts": {
"start": "node scripts/start.js",
"_build": "node scripts/build.js",
- "build":"PUBLIC_URL=https://tencent.github.io/omi/packages/omi-router/examples/spa/build npm run _build",
+ "build": "PUBLIC_URL=https://tencent.github.io/omi/packages/omi-router/examples/spa/build npm run _build",
"fix": "eslint src --fix"
},
"jest": {
diff --git a/packages/omi-router/examples/spa/src/elements/app/index.js b/packages/omi-router/examples/spa/src/elements/app/index.js
index 602b33600..3e92365c8 100644
--- a/packages/omi-router/examples/spa/src/elements/app/index.js
+++ b/packages/omi-router/examples/spa/src/elements/app/index.js
@@ -1,11 +1,6 @@
-import route from 'omi-router'
import { define, WeElement } from 'omi'
-import logo from './logo.png'
-import style from './_index.css'
-import normalizeStyle from '../../assets/_normalize.css'
-import navInfo from './nav'
-
-import '../views/not-found'
+import route from '../../route'
+import '../common/app-frame'
define('my-app', class extends WeElement {
static get data() {
@@ -16,247 +11,23 @@ define('my-app', class extends WeElement {
data = {
pageTitle: '',
- pageContainerClass: [],
routeParams: null,
- navInfo: [],
- showPageLoading: false
- }
-
- css() {
- return normalizeStyle + style
- }
-
- initRoute(routeInfo) {
- let routeList = []
- for (let mainNav of navInfo) {
- if (mainNav.children) {
- for (let childNav of mainNav.children) {
- let childRouteList = []
- if (childNav.children && childNav.children.length) {
- for (let pageNav of childNav.children) {
- childRouteList.push({
- title: pageNav.label,
- labelbList: [mainNav.label, childNav.label, pageNav.label],
- path: '/' + [mainNav.code, childNav.code, pageNav.code].join('/'),
- tag: [mainNav.code, childNav.code, pageNav.code].join('-')
- })
- }
- }
- if (childRouteList.length) {
- if (!mainNav.path) {
- mainNav.path = childRouteList[0].path
- }
- if (!childNav.path) {
- childNav.path = childRouteList[0].path
- }
- routeList = routeList.concat(childRouteList)
- } else {
- if (!childNav.path) {
- childNav.path = '/' + mainNav.code + '/' + childNav.code
- routeList.push({
- title: childNav.label,
- labelbList: [mainNav.label, childNav.label],
- path: childNav.path,
- tag: [mainNav.code, childNav.code].join('-')
- })
- }
- if (!mainNav.path) {
- mainNav.path = '/' + mainNav.code + '/' + childNav.code
- }
- }
- }
- } else {
- mainNav.path = '/' + mainNav.code
- routeList.push({
- title: mainNav.label,
- labelbList: [mainNav.label],
- path: '/' + mainNav.code,
- tag: mainNav.code
- })
- }
- }
- route('/', params => {
- route.to(routeList[0].path, params)
- })
- for (let item of routeList) {
- route(item.path, params => {
- window.document.title = item.title
- this.data.tag = item.tag
- this.data.pageContainerClass = []
- this.data.routeParams = params
- this.data.pageTitle = item.labelbList
- this.updateFramework(this.data.navInfo, item.path.slice(1).split('/'))
- })
- }
-
- route('/home-page', params => {
- window.document.title = 'home-page'
- this.data.tag = 'home-page'
- this.data.pageContainerClass = ['no-page-title', 'no-side-nav']
- this.data.routeParams = null
- this.data.pageTitle = ''
- this.updateFramework(this.data.navInfo, [], true)
- this.data.navInfo[0].selected = true
- })
- route('*', () => {
- if (location.hash === '') {
- this.data.tag = 'home-page'
- this.data.pageContainerClass = ['no-page-title', 'no-side-nav']
- } else {
- window.document.title = '404 NotFound'
- this.data.tag = 'not-found'
- this.data.pageContainerClass = ['no-page-title', 'no-side-nav']
- this.data.routeParams = null
- this.data.pageTitle = ''
- this.updateFramework(this.data.navInfo, [], true)
- }
- })
-
- route.before = event => {
- if (event.newURL.match('/#/nav1/module2/page1')) {
- this.data.showPageLoading = true
- }
- }
+ routeList: []
}
install() {
- this.data.navInfo = navInfo
- this.initRoute(navInfo)
- }
-
- onPageLoaded() {
- this.data.showPageLoading = false
- }
-
- updateFramework(navInfo, navPath, isClear = false) {
- let foundPath = false
- if (!isClear) {
- if (!Array.isArray(navPath) || !navPath.length) {
- return false
- }
+ this.data.routeList = route(this)
+ // show home page if hash is empty
+ if (location.hash === '') {
+ location.hash = '/'
}
- if (!Array.isArray(navInfo) || !navInfo.length) {
- return false
- }
- for (let mainNav of navInfo) {
- if (isClear || mainNav.code !== navPath[0]) {
- mainNav.selected = false
- this.updateFramework(mainNav.children, navPath.slice(1), true)
- } else {
- foundPath = true
- if (
- (!Array.isArray(mainNav.children) || mainNav.children.length) &&
- navPath.length === 1
- ) {
- mainNav.selected = true
- } else {
- mainNav.selected = this.updateFramework(
- mainNav.children,
- navPath.slice(1)
- )
- }
- }
- }
- return foundPath
- }
-
- getRenderedNav(props, data) {
- let mainNav = []
- let subNav = []
- for (let nav of this.data.navInfo) {
- mainNav.push(
-
- {nav.label}
-
- )
- if (nav.selected && nav.children && nav.children.length) {
- for (let childNav of nav.children) {
- subNav.push(
-
- {childNav.label}
-
- )
- }
- if (subNav.length) {
- subNav = [
-
- ]
- }
- }
- }
- return {
- mainNav,
- subNav
- }
- }
-
- getRenderedPageTitle(props, data) {
- let parentTitle = []
- let currentTitle = ''
- if (Array.isArray(this.data.pageTitle) && this.data.pageTitle.length) {
- parentTitle = this.data.pageTitle.slice(0, -1)
- currentTitle = this.data.pageTitle[this.data.pageTitle.length - 1]
- return (
-
- {parentTitle.join(' / ')} {parentTitle.length > 0 && '/'} {currentTitle}
-
- )
- }
- return ''
}
render(props, data) {
- let { mainNav, subNav } = this.getRenderedNav(props, data)
- let pageTitle = this.getRenderedPageTitle(props, data)
return (
-
-
-
- {subNav}
-
- {pageTitle}
-
-
this.onPageLoaded(e)}
- />
-
-
-
-
-
-
+
+
+
+
Home
+ return (
+
+ )
}
})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav1/module1/page1.js b/packages/omi-router/examples/spa/src/elements/views/nav1/module1/page1.js
deleted file mode 100644
index 8afff90d7..000000000
--- a/packages/omi-router/examples/spa/src/elements/views/nav1/module1/page1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { define, WeElement } from 'omi'
-import normalizeStyle from '../../../../assets/_normalize.css'
-
-define('nav1-module1-page1', class extends WeElement {
- static observe = true
- install() {
- this.fire('pageloaded')
- }
- css() {
- return normalizeStyle
- }
- render() {
- return page one is here
- }
-})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav1/module2/page1.js b/packages/omi-router/examples/spa/src/elements/views/nav1/module2/page1.js
deleted file mode 100644
index 167aa401d..000000000
--- a/packages/omi-router/examples/spa/src/elements/views/nav1/module2/page1.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { define, WeElement } from 'omi'
-import normalizeStyle from '../../../../assets/_normalize.css'
-
-define('nav1-module2-page1', class extends WeElement {
- static observe = true
- install() {
- setTimeout(() => {
- this.fire('pageloaded')
- }, 3000)
- }
- css() {
- return normalizeStyle
- }
- render() {
- return page one is here
- }
-})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav1/omi-weui-page/index.js b/packages/omi-router/examples/spa/src/elements/views/nav1/omi-weui-page/index.js
new file mode 100644
index 000000000..837fbbb37
--- /dev/null
+++ b/packages/omi-router/examples/spa/src/elements/views/nav1/omi-weui-page/index.js
@@ -0,0 +1,24 @@
+import { define, WeElement } from 'omi'
+import normalizeStyle from '../../../../assets/_normalize.css'
+
+define('omi-weui-page', class extends WeElement {
+ static observe = true
+ install() {}
+ css() {
+ return (
+ normalizeStyle +
+ 'div { text-align: center; padding-top: 100px; font-size: 20px; }' +
+ 'a { color: #1890FF; font-size: 14px;}'
+ )
+ }
+ render() {
+ return (
+
+ )
+ }
+})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav2/module1/page1.js b/packages/omi-router/examples/spa/src/elements/views/nav2/module1/page1.js
deleted file mode 100644
index bcd51967f..000000000
--- a/packages/omi-router/examples/spa/src/elements/views/nav2/module1/page1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { define, WeElement } from 'omi'
-import normalizeStyle from '../../../../assets/_normalize.css'
-
-define('nav2-module1-page1', class extends WeElement {
- static observe = true
- install() {
- this.fire('pageloaded')
- }
- css() {
- return normalizeStyle
- }
- render() {
- return page one is here
- }
-})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav2/module2/page1.js b/packages/omi-router/examples/spa/src/elements/views/nav2/module2/page1.js
deleted file mode 100644
index 8a7078fa4..000000000
--- a/packages/omi-router/examples/spa/src/elements/views/nav2/module2/page1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { define, WeElement } from 'omi'
-import normalizeStyle from '../../../../assets/_normalize.css'
-
-define('nav2-module2-page1', class extends WeElement {
- static observe = true
- install() {
- this.fire('pageloaded')
- }
- css() {
- return normalizeStyle
- }
- render() {
- return page one is here
- }
-})
diff --git a/packages/omi-router/examples/spa/src/elements/views/nav2/omi-router-page/index.js b/packages/omi-router/examples/spa/src/elements/views/nav2/omi-router-page/index.js
new file mode 100644
index 000000000..d9476a0fe
--- /dev/null
+++ b/packages/omi-router/examples/spa/src/elements/views/nav2/omi-router-page/index.js
@@ -0,0 +1,29 @@
+import { define, WeElement } from 'omi'
+import normalizeStyle from '../../../../assets/_normalize.css'
+
+define('omi-router-page', class extends WeElement {
+ static observe = true
+ install() {}
+ css() {
+ return (
+ normalizeStyle +
+ 'div { text-align: center; padding-top: 100px; font-size: 20px; }' +
+ 'a { color: #1890FF; font-size: 14px;}'
+ )
+ }
+ render() {
+ return (
+
+
+ omi-router is the Omi official router plugin of Omi.
+
+ it's lightweight, easy and powerful to build Omi's SPA(Single Page
+ Application)
+
+
+ learn more about omi-router
+
+