omi-router - supports keep alive mode

packages/omi-mp/gulpfile.js

@@ -194,7 +194,7 @@ import 'omi-router'
 import './utils/mp'
 import './mp/app'
 
-route('*', p => {
+route('*', evt => {
   title('index')
   empty('#root')
   render(<we-index />, '#root')
@@ -221,7 +221,7 @@ function route(arr) {
   let result = []
   arr.forEach(item => {
     const name = item.split('/')[1]
-    result.push(`route('${item.replace('pages', '..')}', p => {
+    result.push(`route('${item.replace('pages', '..')}', evt => {
   title('${name}')
   empty('#root')
   render(<we-${name} />, '#root')

packages/omi-mp/src/index.js

@@ -1,35 +1,24 @@
-import { render } from 'omi'
 import 'omi-router'
-import './utils/mp'
+import { routeUpdate } from './utils/mp'
 import './mp/app'
 
+const root = document.querySelector('#root')
+
 route('*', evt => {
   title('index')
-  empty('#root')
-  render(<we-index />, '#root')
+  routeUpdate(<we-index />, 'we-index', evt.byNative, root)
 })
 
 route('../index/index', evt => {
   title('index')
-  empty('#root')
-  render(<we-index />, '#root')
+  routeUpdate(<we-index />, 'we-index', evt.byNative, root)
 })
 
 route('../logs/logs', evt => {
   title('logs')
-  empty('#root')
-  render(<we-logs />, '#root')
+  routeUpdate(<we-logs />, 'we-logs', evt.byNative, root)
 })
 
-function empty(selector) {
-  const node = document.querySelector(selector)
-  while (node.firstChild) {
-    node.removeChild(node.firstChild)
-  }
-  document.documentElement.scrollTop = 0
-  document.body.scrollTop = 0
-}
-
 function title(value) {
   document.title = value
 }

packages/omi-mp/src/mp/pages/index/index.js

@@ -22,10 +22,7 @@ const mpOption = Page({
   //事件处理函数
   bindViewTap: function() {
     wx.navigateTo({
-      url: '../logs/logs?name=dntzhang&age=18',
-      alive: true,  //当前视图是否alive，默认ture
-      scollTop: 0  //目标url的scollTop，不传scollTop的话使用以前保留的
-      // 浏览器后退行为刚好 alive用true，scollTop不传
+      url: '../logs/logs?name=dntzhang&age=18'
     })
   },
   onLoad: function () {

packages/omi-mp/src/utils/mp.js

@@ -1,3 +1,5 @@
+import { render } from 'omi'
+
 let appOption = null
 function App(option) {
   appOption = option
@@ -70,3 +72,35 @@ function getUrlParams(url) {
   }
   return args
 }
+
+export function routeUpdate(node, selector, byNative, root) {
+  root.childNodes.forEach(child => {
+    if(child.style.display !== 'none'){
+      child._preScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+    }
+    child.style.display = 'none'
+  })
+  if (byNative) {
+    const ele = document.querySelector(selector)
+    if (ele) {
+      ele.style.display = 'block'
+      document.documentElement.scrollTop = ele._preScrollTop
+      document.body.scrollTop = ele._preScrollTop
+      //set twice
+      setTimeout(function(){
+        document.documentElement.scrollTop = ele._preScrollTop
+        document.body.scrollTop = ele._preScrollTop
+      }, 0)
+    } else {
+      render(node, root)
+      document.documentElement.scrollTop = 0
+      document.body.scrollTop = 0
+    }
+  } else {
+    const ele = document.querySelector(selector)
+    ele && ele.parentNode.removeChild(ele)
+    render(node, root)
+    document.documentElement.scrollTop = 0
+    document.body.scrollTop = 0
+  }
+}

packages/omi-router/index.js

@@ -1,5 +1,5 @@
 /*!
- *  omi-router v2.0.7 by dntzhang
+ *  omi-router v2.0.8 by dntzhang
  *  Router for Omi.
  *  Github: https://github.com/Tencent/omi
  *  MIT Licensed.
@@ -11,8 +11,10 @@ var root = getGlobal()
 
 root.route = route
 root.route.params = null
+root.historyLength = 0
 
 root.route.to = function (path, data) {
+  root.route._routeByTo = true
   root.route.data = data
   if (path[0] === '#') {
     location.hash = path
@@ -24,6 +26,14 @@ root.route.to = function (path, data) {
 window.addEventListener('hashchange', change)
 
 function change(evt) {
+  var byNative = false
+  //need to fix a line by omi-link
+  if(window.history.length === root.historyLength && !root.route._routeByTo){
+    //keep alive mode
+    byNative = true
+  }
+  root.route._routeByTo = false
+  root.historyLength = window.history.length
   var prevent = false
   if (evt.type === 'hashchange' && root.route.before) {
     prevent = root.route.before(evt) === false
@@ -40,7 +50,8 @@ function change(evt) {
       mapping[key].callback({
         params: root.route.params,
         query: getUrlParams(path),
-        data: root.route.data
+        data: root.route.data,
+        byNative: byNative
       })
       root.route.data = null
       notFound = false
@@ -50,7 +61,7 @@ function change(evt) {
   })
 
   if (notFound) {
-    mapping['*'] && mapping['*'].callback({})
+    mapping['*'] && mapping['*'].callback({ byNative: byNative })
   }
 
   if (evt.type === 'hashchange' && root.route.after) {